先日、クライアントワークで対応があったものになるのですが、タイトルの通りモーダル表示のタイミングでYouTubeのインライン動画を自動再生するという要件でした。YouTubeのiframe埋め込みではソースURLのパラメーターに「autoplay」のフラグを設定することで自動再生に対応している（過去記事「インラインで埋め込んだYouTubeをページ読み込み完了後に自動再生させる」を参照）のですが、ブラウザの仕様でミュート状態にする必要があります。ただし、ミュート解除の場合にはこの方法が使えません。   そこでJavaScriptでiframeの動画を制御できる「IFramePlayerAPI」を使って、モーダル表示のタイミングで音声有りの状態で自動再生できるようにしてみたいと思います。かつ複数の動画を対象にレスポンシブ表示への対応も合わせて行なっていきます。まずは完成のサンプルをこちらからご確認ください。 （YouTubeのインライン動画に関してはこちらの記事もどうぞ） ・インラインで埋め込んだYouTubeをページ読み込み完了後に自動再生させる ・インラインで埋め込んだYouTubeの関連動画表示を削除する ・YouTubeなどの動画インラインフレームをレスポンシブ対応にする   今回はモーダル表示に複数の動画を対応させるパターンで進めています。またモーダルに関しては簡単なもので詳しい解説は省略しています。モーダルについて詳しくは過去記事「jQueryでプラグインを使わずにシンプルなモーダルウィンドウを実装する」などをご参照ください。  

YouTubeの動画IDをチェック

まず始めに、今回の機能で重要となるYouTubeの動画IDを確認する方法を見ておきます。それぞれの動画にはユニークな文字列がIDとして付与されています。確認方法ですが、iframeでの埋め込みコードの中にソースURLが含まれていますが、その最後の部分の文字列が動画IDになります。

<iframe width="560" height="315" src="https://www.youtube.com/embed/この部分に記載されているのが動画IDです" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

  このようにあらかじめ最初に対象となる動画のIDはあらかじめ確認しておきましょう。それでは早速コードを見ていきます。  

APIを使ってYouTubeの動画を自動再生

まずはHTMLからです。ここでは動画サムネイル部分とモーダル部分に大きく分かれ、動画サムネイルはクリックでモーダルが表示されるようになっています。重要なポイントとしては、まずサムネイル部分にa要素を配置し、そのhref属性の値にそれぞれの動画IDを設定します。ここはアンカーになるので#を入れておきます。そして共通のclass名（ここではvideo_play）を設定しておきます。 【HTML】※一部抜粋

<!-- 動画サムネイルリスト部分 -->
<div class="thumbnails">
  <div class="thumbnail">
    <a href="#YouTubeの動画ID" class="video_play">
      <figure>
        <img src="./thumbnail_01.jpg" alt="再生する">
        <figcaption>サムネイルキャプション</figcaption>
      </figure>
    </a>
  </div>
  <div class="thumbnail">
    <a href="#YouTubeの動画ID" class="video_play">
      <figure>
        <img src="./thumbnail_02.jpg" alt="再生する">
        <figcaption>サムネイルキャプション</figcaption>
      </figure>
    </a>
  </div>
  <div class="thumbnail">
    <a href="#YouTubeの動画ID" class="video_play">
      <figure>
        <img src="./thumbnail_03.jpg" alt="再生する">
        <figcaption>サムネイルキャプション</figcaption>
      </figure>
    </a>
  </div>
</div>

<!-- モーダル＆動画インラインフレーム部分 -->
<div class="modal-wrap" id="modal">
  <div class="modal-panel">
    <div class="modal-frame">
      <div id="YouTubeの動画ID" class="youtube_video"></div>
      <div id="YouTubeの動画ID" class="youtube_video"></div>
      <div id="YouTubeの動画ID" class="youtube_video"></div>
    </div>
    <button class="modal-close" id="modal_close">閉じる</button>
  </div>
</div>

<!-- APIソースコード読み込み -->
<script src="https://www.youtube.com/iframe_api"></script>

  モーダル部分はデザインに合わせて適宜作成しますが、YouTubeのインライン動画をJavaScriptで動的に生成されることになるので、そのターゲットとなる要素を動画の数だけ用意しておき、id属性の値にそれぞれ対応する動画IDをあてておきます。こちらも共通のclass名（ここではyoutube_video）を設定します。そして最後にAPI用のソースコードを忘れずに読み込んでおきましょう。   続いてCSSですが、ここでは主にモーダル用のものと、YouTubeのインライン動画をレスポンシブ対応させるためのスタイルとなりますので、詳しくは省略させていただきます。 【CSS】※一部抜粋

.modal-wrap {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100vh;
  display: none;
  justify-content: center;
  align-items: center;
  background: rgba(0,0,0,0.7);
}
.modal-wrap.shown {
  display: flex;
}
.modal-panel {
  width: calc(100% - 40px);
  max-width: 1200px;
  position: relative;
}
.modal-frame {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.modal-frame iframe {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}

  そして、JavaScriptでYouTubeのインライン動画を制御していきます。まずはモーダルの要素と動画再生のトリガーとなるサムネイル、そしてインライン動画本体のDOMを取得しておきます。また、現在再生中のYouTube動画のIDも取得できるよう変数を用意しておきます。   続いてAPIを使った処理を記述していきます。「onYouTubeIframeAPIReady」関数のなかに続けていくのですが、この関数は、先ほど読み込んだAPIのソースファイルを読み込むと実行される関数となります。基本的にはこの関数内で動画の制御をしていきます。まずは全ての動画IDを配列に格納しておきます。そして、そのIDに合わせて動画再生用のインスタンスを作成しこちらも配列にまとめておきます。これがそれぞれの動画プレーヤーになるイメージですね。インスタンス内では「videoId」の値に、再生させる動画IDが当てられるため、引数で指定しておきます。 【JavaScript】

const videoPlayButtons = document.querySelectorAll('.video_play');
const modalCloseButton = document.getElementById('modal_close');
const modal = document.getElementById('modal');
const videoIframes = document.querySelectorAll('.youtube_video');
let currentVideoId = null;

// APIでのYouTube動画制御
function onYouTubeIframeAPIReady() {
  const videosId = Array.from(videoIframes).map(item => item.id);
  const players = videosId.map(id => {
    return new YT.Player(id, {
      videoId: id,
      playerVars: {
        loop: 0,
        rel: 0
      }
    });
  });

  // モーダル表示＆YouTube動画の自動再生
  videoPlayButtons.forEach(element => {
    element.addEventListener('click', (event) =>{
      modal.classList.add('shown');
      const elementId = element.hash.replace('#', '');
      event.preventDefault();
      const targetVideo = players.filter(player => {
        return player.getVideoData().video_id === elementId;
      });
      document.getElementById(targetVideo[0].getVideoData().video_id).style.display = 'block';
      targetVideo[0].unMute().playVideo();
      currentVideoId = elementId;
    });
  });

  // モーダルクローズ＆YouTube動画の停止
  modalCloseButton.addEventListener('click', (event) => {
    const targetVideo = players.filter(player => {
      return player.getVideoData().video_id === currentVideoId;
    });
    targetVideo[0].stopVideo();
    document.getElementById(currentVideoId).style.display = 'none';
    modal.classList.remove('shown');
  });

}

  動画プレーヤーが作成できたら、表示再生と停止の処理をモーダル機能と合わせて作成していきます。まずは、サムネイル画像のクリックをトリガーにモーダルを表示させ、その時にハッシュの値を取得し、それに対応するIDを持つ動画プレーヤーのオブジェクトを取得します。そして、そのオブジェクトのDOMであるiframeを表示させ、オブジェクトに対して「playVideo()」メソッドを実行すると再生が開始されます。もしミュートが有効化されている場合には、直前に「unMute()」を実行することでミュートを解除してから再生ができます。最後に再生中の動画IDを変数に残しておきます。   そしてモーダルの閉じるボタンのクリックで、動画の停止とモーダルを閉じていきます。再生時と同じように「stopVideo()」のメソッドをプレーヤーのオブジェクトに対して実行することで停止させることができます。それ以外にも「pauseVideo()」のメソッドでは一時停止をさせることができます。そしてiframe自体を非表示にしてからモーダルも閉じる処理をつけて完成です。今回のサンプルはこちらにアップロードしていますのでご確認ください。（今回のサンプルではモダンブラウザを前提としていますのでIE11などに対応させる場合には適宜調整が必要です。）   ちなみに今回のように「playVideo()」を使った自動表示ですが、ブラウザでの制御でユーザー側で再生のアクションが必要となるので、どうやら自動再生についてはPC限定となる感じですね。  

---

  そのほかにもIFramePlayerAPIにはいろんなパラメーターやメソッドが用意されているようです。詳しくはこちらの公式リファレンスをご覧ください。YouTubeの動画はインラインフレームで簡単に埋め込むことができますが、JavaScriptでAPIを使ってコントロールすることで様々な使い方が可能になりますね。動画を使ったコンテンツを作成する時にはぜひ試してみてはいかがでしょうか。   （参考にさせて頂いたサイト） iframe 組み込みの YouTube Player API リファレンス