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

Я пытаюсь вставить новую версию видео YouTube на iframe и запустить ее автоматически.

Насколько я могу судить, нет способа сделать это путем изменения флагов в URL. Есть ли способ сделать это с помощью JavaScript и API?

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

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

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

ОБНОВЛЕНИЕ: теперь полностью поддерживается интерфейс iframe, а в разделе «Создание объектов YT.Player - пример 2» показано, как установить «автозапуск» в JavaScript.

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

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

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

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

Август 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>

Встраивание 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>

в конце 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% в документе. Уже 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
});

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

Встроенные плееры и параметры YouTube

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

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

Если вы делаете один запрос, URL-адрес просто ?autoplay=1работает, как показано в ответе mjhm

<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 ниже для получения дополнительной информации об использовании нескольких строк запроса

Чтобы принятый ответ от 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>

В настоящее время я добавляю новый атрибут «allow» в тег iframe, например:

allow = "акселерометр; автозапуск; зашифрованные носители; гироскоп; картинка в картинке"

Окончательный код:

<iframe src="https://www.youtube.com/embed/[VIDEO-CODE]?autoplay=1" 
frameborder="0" style="width: 100%; height: 100%;"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"></iframe>

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

2 - функция jQuery:

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

Работает отлично

Чтобы использовать API Java,

<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 с идентификатором:

swfobject.embedSWF

ссылка: https://developers.google.com/youtube/js_api_reference magazine

<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>

Декабрь 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}
            />
        )
    }

}