YouTube PlayerでiframeやAPIで自動再生できない理由と解決法

iframeやAPIで自動再生できない

ネット上でYouTube PlayerをiframeやAPIで埋め込んでautoplay=1を指定したのに自動再生できないという書き込みをよく見かける。

YouTube IFrame Player APIのリファレンスには「URL の autoplay パラメータが 1 に設定されているため、プレーヤーが読み込まれると、動画は自動的に再生されます。」とautoplay=1を指定することで自動再生されると書かれている。

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

<iframe id="ytplayer" type="text/html" width="640" height="360"
  src="https://www.youtube.com/embed/M7lc1UVf-VE?autoplay=1&origin=http://example.com"
  frameborder="0"></iframe>

それなのになぜ自動再生されないのかと言うと、公式リファレンスの内容が間違っているのが原因。

YouTubeが自動再生できない理由

YouTubeでは2018年8月23日にshowinfoやrelなどいくつかのパラメータの仕様を変更しており、その中にはautoplay属性はmute属性も有効でなければ有効化しないという仕様変更も含まれていた。

しかし、リファレンスが更新されなかったので2022年現在もGoogle検索経由で公式リファレンスや古いautoplay属性の仕様の説明をしているWebサイトなどを見て、間違った使い方をして自動再生ができなくなっているケースが多い。

YouTubeが自動再生できない解決法

YouTube動画を自動再生するにはURLのパラメータに「autoplay=1&mute=1」を付けます。

スマートフォン(iOS, Android)の場合は「autoplay=1&mute=1」を付けても自動再生は不可です。

<iframe width="640" height="360" src="https://www.youtube.com/embed/M7lc1UVf-VE?autoplay=1&mute=1" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

YouTube動画を自動再生するサンプル

iframeタグをHTMLに書くのではなく、JavaScriptでYouTube Player APIを使用して自動再生させる場合は以下のようにplayerVarsパラメータ内にautoplayとmuteを設定して有効化します。

※ YouTube Player APIでもスマートフォン(iOS, Android)の場合は自動再生は不可です。

// <div id="ytplayer"></div>
const script = document.createElement('script')
script.src = 'https://www.youtube.com/player_api'
document.head.appendChild(script)

function onYouTubePlayerAPIReady() {
  new YT.Player('ytplayer', {
    videoId: 'M7lc1UVf-VE',
    playerVars: {
      autoplay: 1,
      mute: 1,
    },
  })
}

YouTube動画をAPIで自動再生するサンプル