自動再生YouTubeビデオをiframeに埋め込む方法は?

How to embed an autoplaying YouTube video in an iframe?


質問 written by TylerH @2019-08-12 18:24:04Z

: 210 : 13 : 727

YouTubeビデオの新しいiframeバージョンを埋め込み、自動再生できるようにしようとしています。

私が知る限り、URLにフラグを修正することでこれを行う方法はありません。 JavaScriptとAPIを使用してそれを行う方法はありますか?

コメント 1

ビデオの再生を開始するときにサウンドをミュートする方法はありますか?コードを通じて、ユーザーにサウンドを驚かせたくありません

written by ダニエル・メトリスキー @2017-05-24 11:57:45Z

回答 1 written by mjhm @2012-10-24 15:15:28Z
415

これは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で「自動再生」を設定する方法を示しています。

コメント 1

ヒント:モバイルデバイスでは、srcパラメーターとAPI呼び出しの両方が制限のために機能しない可能性があります。developers.google.com/ youtube /…

written by Linus Caldwell 14年 @2014-11-08 23:25:00Z

コメント 2

モバイル(Android 5.0のonYouTubeIframeAPIReady() )では、 onYouTubeIframeAPIReady()の関数がトリガーされないことがonYouTubeIframeAPIReady()誰にも解決策がありますか?

written by どこかの誰か @2015-01-19 19:08:07Z

コメント 3

ビデオの再生を開始するときにサウンドをミュートする方法はありますか?コードを通じて、ユーザーにサウンドを驚かせたくありません

written by ダニエル・メトリスキー @2017-05-24 11:57:52Z

コメント 4

stackoverflow.com/questions/48086769/…@JoJo

written by MattAllegro @2018-05-17 09:41:50Z

コメント 5

iFrameのallow = "autoplay"

written by Jeffz @2018-06-04 20:49:49Z

回答 2 written by develCuy @2013-08-13 20:26:02Z
40

youtubeの埋め込みコードは、デフォルトで自動再生がオフになっています。 「src」属性の最後にautoplay=1を追加するだけです。 例えば:

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

srcに?autoplay=1を追加

written by -Squirrl @2016-06-17 23:20:09Z

コメント 2

はい、実際にautoplay = 1 while?srcが色、コントロールなどのパラメーターを持ち、それぞれが&記号で区切られていることを示します。詳細な説明はここにありますdeveloper.google.com/youtube/player_parameters#Parameters

written by Waheed ur Rehman @2016-06-19 00:12:43Z

回答 3 written by MatayoshiMariano @2018-07-04 18:32:19Z
29

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

<iframe src="https://www.youtube.com/embed/VIDEO_ID?autoplay=1" allow='autoplay'></iframe>
回答 4 written by Victoria @2018-07-11 11:10:03Z
10

2014 iframeは、自動再生を使用してYouTube動画を埋め込み、クリップの最後に推奨動画がない方法に埋め込みます

rel=0&amp;autoplay 

以下の例:。

Example Below: .

回答 5 written by Tim Vermaelen @2018-08-14 12:17:33Z
9

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>
回答 6 written by bdanin @2015-07-15 15:11:44Z
8

iframe srcの最後に、 &enablejsapi=1を追加して、動画でjs APIを使用できるようにします

そしてjqueryで:

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

これにより、document.readyでビデオが自動的に再生されます。

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

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

編集:実際にはdocument.readyで100%確信が持てません。YouTubeがまだビデオをロードしている可能性があるためです。 私は実際にクリック関数内でこの関数を使用しています:

Edit: I'm actually not 100% sure on document.ready the iframe will be ready, because YouTube could still be loading the video. I'm actually using this function inside a click function:

コメント 1

この答えを利用し、jQueryセレクターをsetTimeoutラップすることでうまくsetTimeoutました。

written by tyler.frankenstein @2016-04-18 13:37:28Z

コメント 2

ここでも同じように、毎秒数回イベントを発生させるだけで機能します。

written by マティアスクライン @2017-06-18 07:11:03Z

回答 7 written by Salman A @2012-11-15 22:33:38Z
6

IFRAMEおよびOBJECT埋め込みで使用できるフラグ 、またはパラメーターはここに記載されています。 どのパラメーターがどのプレーヤーで機能するかについての詳細も明確に言及されています。

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

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

回答 8 written by Community @2017-05-23 10:31:14Z
6

知らない人のための複数のクエリのヒント(過去の自分と未来の自分)

あなたがURLで単一のクエリを作成している場合は、mjhmの答えが示すように ?autoplay=1だけが機能します

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

複数のクエリを作成する場合、最初のクエリは? 残りは&始まります

関連動画をオフにし、自動再生を有効にするとします...

これは動作します

This works

そしてこれは動作します

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

しかし、これらは機能しません。

and this works

比較例

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

詳細情報

複数のクエリ文字列の使用に関する詳細については、以下のNextLocalの返信をご覧ください

コメント 1

あなたのものが動作しなかった理由は、そこにすでに?rel=0があったからです。あなたがそれを削除した場合、それは働いたでしょう。クエリ文字列の構文については、必要に応じてこちらをご覧ください。?rel=0?autoplay=1?autoplay=1または?rel=0&autoplay=1いずれ?autoplay=1必要があります

written by jaggedsoft @2016-10-02 20:12:56Z

コメント 2

@NextLocalありがとう、これに戻って、YouTubeビデオをiframeするものに取り組んでいるときに、答えを編集/削除します。

written by ヘイスティグズサメンステルレン @2016-10-03 01:20:27Z

コメント 3

http://www.youtube.com/embed/oHg5SJYRHA0&autoplay=1提供している例は間違いなく機能しませんが、 https://www.youtube.com/embed/oHg5SJYRHA0?autoplay=1https://www.youtube.com/embed/oHg5SJYRHA0?autoplay=1

written by autoplay @2016-10-03 20:00:10Z

コメント 4

@NextLocalハ、私は今それを得た。どうして気づかなかったかわからない:Dどうもありがとう。

written by ヘイスティグズサメンステルレン @2016-10-04 04:27:15Z

コメント 5

ビデオの再生を開始するときにサウンドをミュートする方法はありますか?コードを通じて、ユーザーにサウンドを驚かせたくありません

written by ダニエル・メトリツキー @2017-05-24 11:58:08Z

回答 9 written by MattAllegro @2018-05-17 09:59:54Z
3

2018年5月にChrome 66で動作するmjhmによる受け入れられた答えを得るために、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>
回答 10 written by Vasfed @2016-06-21 14:22:42Z
1

1- IFRAME SRC &enablejsapi=1を追加します

2-jQuery func:

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

正常に動作します

コメント 1

私の場合、コンソールから、またはすでにビデオを手動で操作したときに機能します。タイムアウトでもロード時に機能しない

written by -mate.gwozdz @2018-07-06 17:03:33Z

回答 11 written by HTML5 developer @2015-03-11 07:41:42Z
0

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を再生するには:

To play the youtube with the id:

参照: https : //developers.google.com/youtube/js_api_reference magazine

回答 12 written by Paul Roub @2017-09-30 20:12:33Z
0
<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 written by Davide Carpini @2018-12-20 21:00:53Z
0

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

}
回答 14 written by Jonas WebDev @2019-12-06 21:15:19Z
0

最近では、iframeタグに新しい属性「allow」を追加しています。たとえば、

allow = "accelerometer;自動再生;暗号化メディア;ジャイロスコープ; picture-in-picture"

最終的なコードは次のとおりです。

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