YouTubeの埋め込みを自動再生させる方法(Chrome対応)

↑の動画のようにiframeで埋め込んだYouTube動画を自動再生させる方法を説明します。

※スマホは非対応
※ブラウザの設定によっては自動再生がブロックされる可能性があります。

1.まず普通に埋め込みタグを取得します。その時にお好みでコントロールや動画タイトルなどを非表示にしておきます。

取得したリンクがこちらです。

<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/k6ZTJHH15es?rel=0&amp;controls=0&amp;showinfo=0″ frameborder=”0″ allow=”autoplay; encrypted-media” allowfullscreen></iframe>

2.この埋め込みタグに次の4つのオプションを追加します。

  • autoplay=1
  • loop=1
  • playlist=動画のID(上記埋め込みコードのk6ZTJHH15esの部分)
  • muted=1

公式ドキュメントによると現時点では「autoplay=1」を有効化させるためには「playlist=動画ID」を付けないと有効にならないようです。GoogleChromeの場合は音声付の動画の自動再生は許可されていないため、muted=1をつけてミュートにする必要があります。(現時点ではmuted=1をつけてもミュートにはならないが、自動再生はされるようになる。)

3.自動再生される埋め込みコードがこちらです。

<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/k6ZTJHH15es?rel=0&amp;controls=0&amp;showinfo=0&amp;autoplay=1&amp;loop=1&amp;playlist=k6ZTJHH15es&amp;muted=1” frameborder=”0″ allow=”autoplay; encrypted-media” allowfullscreen></iframe>

 

ちなみに、GoogleChromeはvideo要素の場合でも音声が有効になっている場合は自動再生されないので、<video src=”” autoplay loop muted></video>とmuted属性を追加する必要があるようです。

ファイル・ロケーション: TIPS

返信を残す

メールアドレスが公開されることはありません。