Youtubeをスマホでインライン自動再生させる

今回やりたいこと

最近はサイトに動画を埋め込む際、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の自動再生(消音)×ループ再生を実現することができました。

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

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

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

related article

2020/01/22 JavaScript

PCとスマホで別の画像に切り替えてくれるjQuery

2019/12/10 JavaScript

slickで現在のページ数 / 総ページ数を表示させる

2019/11/19 JavaScript

slideUpやslideDownを使ったときのレスポンシブ対応

2019/10/15 JavaScript

スマホで背景スクロールを禁止にする