今回やりたいこと

最近はサイトに動画を埋め込む際、mp4ファイルではなく、youtubeの動画をそのまま埋め込みたいということも多いと思います。

Youtubeのiframeに設定できるパラメータは数多く用意されていますが、今回直面した問題は、「autoplay=1」「muted=1」を付与しても、スマホで自動再生がされませんでした。

どうやらタグに直接埋め込むパラメータでは、スマホでうまく動かないようです。

jsを使用して、スマホでのYoutube自動再生に成功したので記事に残します。

HTML

まずはHTMLです。通常Youtubeを埋め込むときはiframeタグを直接HTMLに貼り付けると思いますが、今回は以下のみです。

<div id="js-player"></div>

このdivが丸っとiframeに置き換わるイメージです。このdivの中にiframeが出力されるわけではないので注意してください。

JavaScript

まずはiFrame Player APIを読み込みます。

今回はjs内にその記述をします。（jQueryは事前に読み込ませてください）

$("body").append('<script src="https://www.youtube.com/iframe_api">');

次にYouTubeプレーヤーを埋め込む記述を追加します

let ytPlayer;
  setTimeout(function onYouTubeIframeAPIReady() {　// setTimeoutで0.5秒後に実行
    ytPlayer = new YT.Player(
      "js-player", // 埋め込む場所の指定
      {
        videoId: "YouTubeのID", // YouTubeのID,
        playerVars: {
          loop: 1,
          autoplay: 1,
          rel: 0,
          controls: 0,
          modestbranding: 1,
          widgetid: 1,
          playlist: "YoutubeのID",
          playsinline: 1, // スマホでも自動再生
          showinfo: 0,
          fs: 0,
        },
        events: {
          onReady: onPlayerReady,　// プレーヤーの準備ができたとき
          onStateChange: onPlayerStateChange,　// プレーヤーの再生、一時停止、終了したとき
        },
      }
    );
  }, 500);

上記でsetTimeOutを使用しない場合は動画が表示されませんでした。

これはYoutube動画の読み込みの時間がかかるため、そのあとの処理のタイミングを遅らせるという処理です。

ちなみに動画をループで再生させたい場合、onPlayerReadyのイベントで、音声を消した後に再生する必要があります。

  function onPlayerReady(event) {
    event.target.mute();　// 音声を消す
    event.target.playVideo();　// 動画再生
  }

さらに上記eventsで定義した、onStateChange関数を使って動画の再生が終わったら、再度再生させる処理が必要になります。

  function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.ENDED) {
      event.target.playVideo();
    }
  }

こんな感じでPCとスマホ双方で、Youtubeの自動再生（消音）×ループ再生を実現することができました。

参考にさせていただいた記事

今回参考にさせていただいた記事はこちらとこちらです。

設定パラメータも細かく書いてあって分かりやすいので是非参考にしてみてください。