Як вставити автоматично відтворюване відео YouTube у кадр?

Я намагаюся вставити нову версію iframe відео на YouTube і дозволити його автоматично відтворювати.

Наскільки я можу сказати, немає можливості зробити це шляхом внесення змін до прапорів до 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 вбудовує існує, але до сих пір розміщений в якості експериментальної функції.

ОНОВЛЕННЯ: API 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":""}', '*');
});

це має відтворювати відео автоматично в документі вже

зауважте, що ви також можете використовувати це всередині функції клацання, щоб натиснути на інший елемент для запуску відео

Що ще важливіше, ви не можете автоматично запустити відео на мобільному пристрої, тому користувачам завжди доведеться натискати на сам відеоплеєр, щоб запустити відео.

Редагувати: я фактично не впевнений на 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>

Сьогодні я включаю новий атрибут "дозволити" в тег iframe, наприклад:

дозволити = "акселерометр; автовідтворення; зашифровані носії; гіроскоп; картина в картинці"

Остаточний код:

<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":""}', '*');

Добре працює

Щоб використовувати 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 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 для реагування.

Інші відповіді не спрацювали.

Я знайшов рішення з бібліотекою: react-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}
            />
        )
    }

}