Web ページに埋め込んだ動画が自動再生されない時の対応方法

Web ページに動画を埋め込んでブラウザで表示してみたけど自動再生されないといった時の対応方法をまとめてみました。埋め込み方法や閲覧する環境によって対応方法は変わってきますが、こちらの方法を試してみることによって自動再生させることができるようになるかと思いますのでご確認いただければと思います。

最初に確認事項

こちらに書いた内容は記事執筆時時点では仕様上変更できない内容となりますのでご了承ください。

音を出しての自動再生はできません。

以前はブラウザで表示したら動画が音を出して自動再生されるページも作成することができたかと思いますが、現在の主要ブラウザでは自動再生によって勝手に音が出てしまうことを防ぐために PC やスマホといった閲覧する環境によらず音を出しての動画の自動再生をすることはできなくなっています。ブラウザで表示した際に自動再生をしたい場合は動画の音を出なくさせる必要があります。音を出して再生をしたい場合は、自動再生をすることはできません。

iPhone の低電力モードでは自動再生されません。

iPhone でバッテリーが少なく低電力モードになっている場合、ページの方で動画が自動再生される設定になっていたとしても消費電力を抑えるために動画は自動再生されなくなる仕様となっているようです。低電力モードを解除すると動画は自動再生されるようになります。

video タグを使って動画を表示している場合の自動再生の対応方法

videoタグを使ってサーバー上に置いてある動画ファイルを読み込んで表示している場合は、videoタグにautoplay属性、muted属性、playsinline属性を追加することで自動再生を行うことができます。

<video src="sample.mp4" autoplay muted playsinline></video>

autoplay属性はその名の通り自動再生をさせるための属性ですが、最初に書いた通り、音が出ない状態にしないと自動再生はできませんので音が出ない状態にするmuted属性も一緒に追加する必要があります。（元々、音がないファイルを読み込む場合でもmuted属性は付ける必要があります。）

playsinline属性は動画ファイルの再生方法をインライン再生（全画面モードにして再生するのではなく、埋め込まれた表示領域でそのまま再生する）に指定するという属性ですが、こちらがないと iPhone での表示では動画が自動再生されませんので追加します。

属性を追加する順番はこの通りでなくても問題ありません。
sourceタグを使い、複数ファイルを表示候補として挙げる場合にもvideoタグにこちらの属性を追加すれば大丈夫です。

<video autoplay muted playsinline>
   <source src="sample.mp4"  type="video/mp4">
   <source src="sample.webm" type="video/webm">
   <source src="sample.ogv"  type="video/ogg">
</video>

iframe タグを使って YouTube 動画を表示している場合の自動再生の対応方法

iframeタグを使って YouTube 動画を読みこんで表示している場合は、iframeタグのsrc属性で指定しているURLにパラメータを追加することで自動再生を行うことができます。

YouTube から動画の埋め込みコードを取得すると下記のようなコードが取得できるかと思います。

<iframe width="560" height="315" src="https://www.youtube.com/embed/aqa9h-nL-TA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

こちらのsrc属性で指定されている URL に自動再生させるパラメータautoplay=1と音が出ないようにするパラメータmute=1を追加します。URL の最後に ? を追加し、その後にパラメータを & を付けて繋げていきます。

元のURL
https://www.youtube.com/embed/aqa9h-nL-TA
↓
パラメータを追加した URL
https://www.youtube.com/embed/aqa9h-nL-TA?autoplay=1&mute=1

コードはこのようになります。

<iframe width="560" height="315" src="https://www.youtube.com/embed/aqa9h-nL-TA?autoplay=1&mute=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

実際に埋め込みますとこのようになり、音が出ない状態で自動再生が行われます。

確認していただくとわかりますが、こちらの方法ではスマホ表示での自動再生を行うことはできないようです。インライン再生を行うという playsinline=1 というパラメータも用意されてますがこちらを追加しても自動再生は行われません。

スマホ表示での動画の自動再生は、読み込みに時間がかかり表示が遅くなったり強制的に動画を見なくてはならなくなったりするため、ユーザー体験（UX）として好ましくないと捉えられておりあまり推奨はされていないようです。それでも YouTube 動画をスマホでも自動再生したい場合には次に示す Iframe Player API を使うことで自動再生を行うことができます。

IFrame Player API を使って YouTube 動画を表示させる方法と自動再生の対応方法

Javascript の IFrame Player API を使うとiframeの内容を動的に作成することができます。こちらを使うことでスマホ表示でも YouTube 動画の自動再生を行うことができます。

以下がサンプルコードです。

<!DOCTYPE html>
<html>
  <body>
    <!-- 1.この div タグが iframe タグに置き換わります。 -->
    <div id="player"></div>

    <script>
      // 2. IFrame Player API のコードを読み込みます。
      var tag = document.createElement('script');
      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      // 3. iframe の設定を行います。
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          videoId: 'aqa9h-nL-TA',
          events: {
            'onReady': onPlayerReady,
          }
        });
      }

      // 4. 最初にこちらの onPlayerReady() が呼び出され動画を再生します。
      function onPlayerReady(event) {
        event.target.mute();
        event.target.playVideo();
      }
    </script>
  </body>
</html>

コード解説

コードを簡単に解説していきます。

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

こちらの部分がiframeタグに置き換えられて YouTube 動画が読み込まれる箇所となります。

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

こちらで Iframe Player API を読み込むscriptタグを作成し、他のscriptタグより前に挿入しています。

var player;
function onYouTubeIframeAPIReady() {
   player = new YT.Player('player', {
      videoId: 'aqa9h-nL-TA',
      events: {
         'onReady': onPlayerReady,
      }
   });
}

API を読み込み、準備が完了するとこちらのonYoutubeIframeAPIReady()が呼び出されiframeで再生する動画の設定を行えます。YT.Playerのコンストラクタの第一引数playerは置き換えるdivタグのid、videoIdは再生する YouTube 動画の動画 ID を指定します。iframeの準備が完了すると onPlayerReady()が呼び出されるよう設定しています。他にも様々な設定が行えますが、ここでは割愛します。

function onPlayerReady(event) {
   event.target.mute();
   event.target.playVideo();
}

onPlayerReady()が呼び出されると音量をゼロにして動画の再生を行い、自動再生が開始される形となります。こちらはスマホ表示でも動画の自動再生が行われます。

こちらの方法で実際に埋め込みますとこのような自動再生表示となります。

スマホ表示でも自動再生されることを下記 QR コードからぜひご確認いただければと思います。

参考サイト

iframe 組み込みの YouTube Player API リファレンス

まとめ

Web ページに埋め込んだ動画を自動再生させる方法をまとめさせていただきました。自動再生させたい時に参考にしてみてください。不明点等ございましたら、下のお問い合わせフォームよりお気軽にご連絡いただければと思います。