web-dev-qa-db-ja.com

YouTube Iframeが自動再生を埋め込む

新しいiframe版のYouTubeビデオを埋め込んで自動再生するようにしています。

私が言うことができる限り、URLにフラグを修正することによってこれをする方法はありません。 JavaScriptとAPIを使ってそれをする方法はありますか？

iframeyoutubeyoutube-api
201
472084

これはChromeでは動作しますがFirefox 3.6では動作しません（警告：RickRollビデオ）：

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

iframe埋め込み用のJavaScript API は存在しますが、まだ実験的な機能として掲載されています。

更新：iframe APIは現在完全にサポートされており、 "YT.Playerオブジェクトの作成 - 例2" はJavaScriptで "autoplay"を設定する方法を示しています。

407
mjhm

Youtubeの埋め込みコードはデフォルトで自動再生をオフにしています。 "src"属性の最後にautoplay=1を追加するだけです。例えば：

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

2018年4月以来、Googleは 自動再生ポリシー にいくつかの変更を加えました。だからあなたはこのようなことをする必要があります：

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

2014 iframeがYouTubeの動画を自動再生で埋め込む方法を埋め込み、推奨動画はクリップの最後に埋め込みません

rel=0&amp;autoplay

以下の例：.

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

iframe srcの最後に、js APIをビデオで使用できるようにするために&enablejsapi=1を追加します。

そしてjqueryを使って：

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

これはdocument.readyで自動的にビデオを再生するはずです。

また、クリック機能の中でこれを使用して別の要素をクリックしてビデオを開始することもできます。

さらに重要なことに、モバイルデバイスで動画を自動起動することはできないため、ユーザーは動画を再生するために動画プレーヤー自体をクリックする必要があります。

編集：私は実際にはドキュメントについて100％確信があるわけではありません。すでにYouTubeはビデオをロードしている可能性があるので、iframeは準備ができているでしょう。私は実際にクリック機能の中でこの機能を使っています：

$('.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
});
7
bdanin

知らない人（過去の私と未来の私）のための複数の質問のヒント

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の回答をご覧ください。

6
Hastig Zusammenstellen

flags 、またはIFRAMEとOBJECTの埋め込みで使用できるパラメータは、ここで文書化されています。どのパラメーターがどのプレーヤーで機能するかについての詳細も明確に述べられています。

YouTubeの埋め込みプレーヤーとプレーヤーのパラメータ

autoplayはすべてのプレーヤー（AS3、AS2、およびHTML5）でサポートされていることに気付くでしょう。

6
Salman A

2018年5月にmjhmがChrome 66を使って回答を受け付けるために、iframeにallow=autoplayを、クエリ文字列にenable_js=1を追加しました。

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

2018年8月iframeの実装に関する実用的な例が見つかりませんでした。その他の質問はChromeのみに関連していたため、少し問題がありました。

Chromeで自動再生するには、サウンドのmute=1をミュートする必要があります。 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>
2
Tim Vermaelen

1 - &enablejsapi=1にIFRAME SRCを追加

2 - jQueryの機能：

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

正常に動作します

1
Gabriel Morais

2018年12月

反応のための自動再生、ループ、ミュートの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}
            />
        )
    }

}
0
Davide Carpini

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_referencemagazine

0
HTML5 developer
<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>
0
George Sariev