Как встроить автоматически воспроизводимое видео YouTube в iframe?

Ответ 1

Это работает в Chrome, но не Firefox 3.6 (предупреждение: видео RickRoll):

<iframe width="420" height="345" src="http://www.youtube.com/embed/oHg5SJYRHA0?autoplay=1" frameborder="0" allowfullscreen></iframe>

API JavaScript для фреймов iframe существует, но все еще размещен как экспериментальная функция.

UPDATE: теперь API-интерфейс iframe полностью поддерживается и "Создание объектов YT.Player - пример 2" показывает, как установить "автовоспроизведение" в JavaScript.

Ответ 2

Встроенный код youtube отключен по умолчанию. Просто добавьте autoplay=1 в конец атрибута "src". Например:

<iframe src="http://www.youtube.com/embed/xzvScRnF6MU?autoplay=1" width="960" height="447" frameborder="0" allowfullscreen></iframe>

Ответ 3

С апреля 2018 года Google внесла некоторые изменения в Политику автозапуска. Так что вам придется сделать что-то вроде этого:

<iframe src="https://www.youtube.com/embed/VIDEO_ID?autoplay=1" allow='autoplay'></iframe>

Ответ 4

Встраивание в iframe 2014 года о том, как вставить видео на YouTube с автоматическим воспроизведением и без рекомендуемых видео в конце клипа

rel=0&autoplay 

Пример ниже:

<iframe width="640" height="360" src="//www.youtube.com/embed/JWgp7Ny3bOo?rel=0&amp;autoplay=1" frameborder="0" allowfullscreen></iframe>

Ответ 5

в конце iframe src, добавьте &enablejsapi=1, чтобы позволить js API использовать на видео

а затем с помощью jquery:

jQuery(document).ready(function( $ ) {
  $('.video-selector iframe')[0].contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');
});

это должно автоматически воспроизводить видео на document.ready

обратите внимание, что вы также можете использовать это внутри функции щелчка, чтобы щелкнуть по другому элементу, чтобы начать видео

Что еще более важно, вы не можете автоматически запускать видео на мобильном устройстве, поэтому пользователям всегда нужно щелкнуть по самому видеопроигрывателю, чтобы начать видеоролик

Изменить: Я на самом деле не уверен на 100% на document.ready iframe будет готов, потому что YouTube все еще может загружать видео. Я фактически использую эту функцию внутри функции щелчка:

$('.video-container').on('click', function(){
  $('video-selector iframe')[0].contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');
  // add other code here to swap a custom image, etc
});

Ответ 6

Флаги или параметры, которые вы можете использовать с затворами IFRAME и OBJECT, описаны здесь; подробности о том, какой параметр работает с каким игроком, также четко указаны:

Параметры встроенных игроков и игроков YouTube

Вы заметите, что autoplay поддерживается всеми игроками (AS3, AS2 и HTML5).

Ответ 7

Несколько запросов для тех, кто не знает (мимо меня и будущего меня)

Если вы делаете один запрос с url только ?autoplay=1 работает как показано mjhm answer

<iframe src="https://www.youtube.com/embed/oHg5SJYRHA0?autoplay=1"></iframe>

Если вы делаете несколько запросов, помните, что первая начинается с ?, а остальные начинаются с &

Предположим, вы хотите отключить связанные видео, но включите автовоспроизведение...

Это работает

<iframe src="https://www.youtube.com/embed/oHg5SJYRHA0?rel=0&autoplay=1"></iframe>

и это работает

<iframe src="https://www.youtube.com/embed/oHg5SJYRHA0?autoplay=1&rel=0"></iframe>

Но это не сработает.

<iframe src="https://www.youtube.com/embed/oHg5SJYRHA0?rel=0?autoplay=1"></iframe>

<iframe src="https://www.youtube.com/embed/oHg5SJYRHA0&autoplay=1&rel=0"></iframe>

примеры сравнения

https://jsfiddle.net/Hastig/p4dpo5y4/

больше информации

Прочитайте NextLocal ответ ниже для получения дополнительной информации об использовании нескольких строк запроса

Ответ 8

Август 2018 г. Я не нашел рабочего примера по внедрению iframe. Другие вопросы были связаны только с Chrome, что немного отдали его.

Вам придется отключить звук mute=1, чтобы запустить авто на Chrome. FF и IE, кажется, работают очень хорошо, используя autoplay=1 качестве параметра.

<iframe src="//www.youtube.com/embed/{{YOUTUBE-ID}}?autoplay=1&mute=1" name="youtube embed" allow="autoplay; encrypted-media" allowfullscreen></iframe>

Ответ 9

Чтобы принятый ответ от mjhm, работающего над Chrome 66 в мае 2018 года, я добавил allow=autoplay в iframe и enable_js=1 в строку запроса:

<iframe allow=autoplay width="420px" height="345px" src="http://www.youtube.com/embed/oHg5SJYRHA0?autoplay=1&enable_js=1"></iframe>

Ответ 10

1 - добавить &enablejsapi=1 в IFRAME SRC

2 - jQuery func:

  $('iframe#your_video')[0].contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');

Работает нормально

Ответ 11

Чтобы использовать javascript api,

<script type="text/javascript" src="swfobject.js"></script>
  <div id="ytapiplayer">
    You need Flash player 8+ and JavaScript enabled to view this video.
  </div>

  <script type="text/javascript">

    var params = { allowScriptAccess: "always" };
    var atts = { id: "myytplayer" };
    swfobject.embedSWF("http://www.youtube.com/v/OyHoZhLdgYw?enablejsapi=1&playerapiid=ytplayer&version=3",
                       "ytapiplayer", "425", "356", "8", null, null, params, atts);

  </script>

Для воспроизведения youtube с id:

swfobject.embedSWF

ссылка: https://developers.google.com/youtube/js_api_reference журнал

Ответ 12

<iframe width="560" height="315" 
        src="https://www.youtube.com/embed/9IILMHo4RCQ?rel=0&amp;controls=0&amp;showinfo=0&amp;autoplay=1" 
        frameborder="0" allowfullscreen></iframe>

Ответ 13

Декабрь 2018 г.

Ищете видео в режиме AUTOPLAY, LOOP, MUTE для реакции на YouTube.

Другие ответы не сработали.

Я нашел решение с библиотекой: Reaction-YouTube

class Video extends Component {

    _onReady(event) {
        // add mute
        event.target.mute();
        // add autoplay
        event.target.playVideo();
    }

    render() {
        const opts = {
            width: '100%',
            height: '700px',
            playerVars: {
                // remove video controls 
                controls: 0,
                // remove related video
                rel: 0
            }
        };

        return (
            <YouTube
                videoId="oHg5SJYRHA0"
                opts={opts}
                // add autoplay
                onReady={this._onReady}
                // add loop
                onEnd={this._onReady}
            />
        )
    }

}