ウェブページにYouTube動画をiframeで埋め込み、自動再生させる方法についてご紹介します。自動再生させるためには特定の条件が必要ですので、そちらも合わせて解説します。
通常のiframe埋め込み方法
埋め込みコードの取得
- 共有したい動画のページで、『共有』ボタンをクリックします。
- 共有方法を選択できるので『埋め込む』をクリックします。
- 表示されたiframeの埋め込みソースコードをコピーします。
通常の埋め込み例
以下のようなコードが表示されます。
<iframe width="560" height="315" src="https://www.youtube.com/watch?v=GL7_vQKL9fE&t=106s" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
こちらをページに貼り付けます。
自動再生の条件
YouTube動画を自動再生させるには以下の条件が必要です。
- モバイル表示では自動再生されない
- パソコン表示の場合でも、ミュート設定が必要
自動再生の設定方法
自動再生させるためには、iframeのsrc属性に以下のパラメータを追加します。
<iframe type="text/html" width="720" height="405" src="https://www.youtube.com/embed/GL7_vQKL9fE?autoplay=1&mute=1"></iframe>パラメータの詳細
autoplay=1：自動再生を有効にします。mute=1：ミュート設定を有効にします。
2つのパラメータは&で連結します。
ミュート設定なしでの自動再生？
ミュート設定なしで自動再生させるには以下のようにします。
<iframe type="text/html" width="720" height="405" src="https://www.youtube.com/embed/GL7_vQKL9fE?autoplay=1"></iframe>ただし、現状ではミュート設定がないと自動再生がされません。
まとめ
ページ読み込み後にYouTube動画を自動再生させるには、ミュート設定を有効にする必要があります。これはユーザーが大容量の通信を無駄にしないようにするための仕様のようです。あとはいきなり音がならないような配慮もあるのかもしれません。また、モバイル表示では自動再生が行われない点にも注意が必要です。
御参考ください。
