はじまり・ページを開くとYouTube埋め込み動画を自動再生させる方法？

動画を自動再生させる事自体の行儀良し悪しについては、ここでは置いておきます。 とりあえず、僕個人は特にモバイル機器ではユーザーが望まないタイミングでギガを消費させるのは(言ってみたかっただけ)サイトの印象悪化につながりかねないので、やめておくのが無難だと考えてます。

所要で、ウェブページに埋め込まれたYouTubeの動画を自動再生出来る方法を調べる機会があったので、その調査のメモです。

先に結論・全環境対応させるには、多分videoタグを使うしか無い(消音限定)

執筆日の時点では、iOS/Android/PCの全環境でYouTubeの自動再生は多分無理です。 vimeo(ヘルプセンター)やDailyMotion(FAQ)等、他の動画サービスでも難しそうです。 自分のサーバー等に動画ファイルをアップロードして、そのURLを指定してvideoタグを使うしかありません。

具体的には……

<video src="動画のURL" muted autoplay></video>

……と記述するこで、どの環境でも共通してvideoタグで指定した動画を自動再生させる事ができます。 なお、iOS/Androidのモバイル機器のブラウザでの自動再生には「muted」属性の指定が必須です。自動再生で音を出す事はできません。

これも、最近のバージョンのブラウザ限定となります。検索してみても、少し前の記事までは、videoタグを使っても不可能な旨の記事がわんさか出てきます。 消音限定ながらもiOS/Androidで自動再生できるようになったのは、最近のブラウザからとなります。

Android以外ならvideoタグでなくても自動再生できる

PC限定なら公式の埋め込みコードベースでOK

たとえば、前回の記事で埋め込んだ、僕が描いている様子を載せたYouTube動画の場合、こんなコードになります。

<iframe width="560" height="315"
 src="https://www.youtube.com/embed/2wsQQgsXagc?rel=0"
 frameborder="0" allowfullscreen></iframe>

普通にYouTubeの動画ページの「共有>埋め込む」と選んで出て来るコードですね。

このコードで自動再生に対応させると、こうなります。

<iframe width="560" height="315"
 src="https://www.youtube.com/embed/2wsQQgsXagc?rel=0&autoplay=1"
 frameborder="0" allowfullscreen></iframe>

src属性で指定するURLに「autoplay=1」の パラメータを追加する事で、PCでは自動再生されます。ただし、これではiOS/Androidでは自動再生されません。

YouTubeのIFrame APIを使えばiOS/PCまでは対応できる(消音限定)

埋め込みiframeタグではなく、YouTubeが用意しているIFrame APIを使えば、iOSでも自動再生できます。(もちろん消音限定)

こんな感じの記述で実行できます。 PCのみの埋め込みiframeタグよりもかなり自由に挙動を設定出来るのが大きなメリットです。

<div id="auto-play-video"><!-- このDIVボックス内にビデオが埋め込まれる --></div>

<script>
  const videoId = "動画ID";
  const videoPlayDivId = "auto-play-video";

  // IFrame APIの読み込み
  const scriptElm = document.createElement("script");
  scriptElm.src = "https://www.youtube.com/iframe_api";
  const headElm = document.querySelector("head");
  headElm.appendChild(scriptElm);

  // iframeで埋め込まれるプレイヤーの設定
  function onYouTubeIframeAPIReady() {
    const player = new YT.Player(videoPlayDivId, {
      playerlets : {
        playlist : videoId,
        autoplay : 1,
      },
      events: {
        "onReady": onPlayerReady
      }
    });
  }

  // プレイヤーの準備完了時に実行される関数
  function onPlayerReady(event) {
    const player = event.target
    player.mute(); // 消音しないと自動再生されない
    player.playVideo();
  }
</script>

なお、このコードでは、ページの読み込み時のスクロール位置の画面内に動画が入っていないと自動再生が開始しましせん。 もし、ページの下の方に置いたものを自動再生させたい場合は、スクロールイベントを取得して実行するなどの一工夫が必要になります。

iOSができて、Androidができない事があったなんて……！

ChromeならiOSもAndroidも同じ動作をするはず……そんなふうに考えていた時期が俺にもありました。

このコードをiOSのSafari/Chrome環境で実行し、無事に再生された時「やった！これでAndroidでもYouTubeを自動再生できる！」と喜んだのだけど、実際試して調べると、意外にAndroidでは自動再生することが出来ませんでした。

iOSで出来てAndroidで出来ないことなんて、ほぼ無いと思っていたけど、意外な落とし穴で、調べるのに随分時間がかかってしまいました。

まとめるとこんな感じ

ブラウザのバージョンはいずれも執筆時点での最新版です。

	YouTube埋め込みiframeタグ (vimeo、dailymotionも同様)	YouTube IFrame API使用	videoタグ
PC(Chrome)	○	○	○
iOS(Chrome/Safari)	×	△ (消音なら可)	△ (消音なら可)
Android(Chrome)	×	×	△ (消音なら可)

とりあえず、今日現在は全環境で動画の自動再生を完全に行う事は無理で、かなり制約がある事がわかりました。