自動再生の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>

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

更新：iframe APIが完全にサポートされるようになり、「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年4月以降、Googleは自動再生ポリシーにいくつかの変更を加えました。したがって、次のようなことを行う必要があります。

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

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

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

2014 iframe埋め込み、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でビデオが自動的に再生されます。

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

さらに重要なのは、モバイルデバイスでビデオを自動再生できないため、ユーザーは常にビデオプレーヤー自体をクリックしてビデオを開始する必要があるためです。

編集：YouTubeがまだ動画を読み込んでいる可能性があるため、実際にはdocument.readyのiframeの準備ができていることを100％確信できません。私は実際にクリック関数内でこの関数を使用しています：

$('.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>

複数のクエリを作成する場合、最初のクエリはaで始まり?、残りのクエリはaで始まることに注意してください。&

関連動画をオフにして自動再生を有効にしたいとします...

これは機能します

<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の返信をご覧ください

2018年5月にmjhmがChrome 66で作業することで承認された回答を得る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タグに新しい属性「allow」を含めています。次に例を示します。

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

正常に動作します

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>

IDでYouTubeを再生するには：

swfobject.embedSWF

リファレンス：https : //developers.google.com/youtube/js_api_reference マガジン

<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年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}
            />
        )
    }

}