スキルアップを始める!

YouTubeのiframe埋め込み動画を自動再生する方法

WordPress(ワードプレス)
この記事は約3分で読めます。

※記事中に広告情報を含みます。

\ワードプレスのスキルアップはこちら!/ WordPress入門読本

ウェブページにYouTube動画をiframeで埋め込み、自動再生させる方法についてご紹介します。自動再生させるためには特定の条件が必要ですので、そちらも合わせて解説します。

通常のiframe埋め込み方法

埋め込みコードの取得

  1. 共有したい動画のページで、『共有』ボタンをクリックします。
  2. 共有方法を選択できるので『埋め込む』をクリックします。
  3. 表示された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>

パラメータの詳細

  1. autoplay=1:自動再生を有効にします。
  2. mute=1:ミュート設定を有効にします。

2つのパラメータは&で連結します。

ミュート設定なしでの自動再生?

ミュート設定なしで自動再生させるには以下のようにします。

<iframe type="text/html" width="720" height="405" src="https://www.youtube.com/embed/GL7_vQKL9fE?autoplay=1"></iframe>

ただし、現状ではミュート設定がないと自動再生がされません。

まとめ

ページ読み込み後にYouTube動画を自動再生させるには、ミュート設定を有効にする必要があります。これはユーザーが大容量の通信を無駄にしないようにするための仕様のようです。あとはいきなり音がならないような配慮もあるのかもしれません。また、モバイル表示では自動再生が行われない点にも注意が必要です。

御参考ください。

URLをコピーしました!