モーダルで表示するYouTube動画をボタンごとに切り替え

はじめに

　今回なでしこジャパン応援団体eAstBlueのHPを作る際に調べて出てこなかった内容を書き留めたものです。この記事を見た方にとって参考になっていましたら幸いです。

モーダルでYouTubeの表示

　今までHTML埋め込みの形ではやっていました。同様の方法でモーダルにそのまま埋め込んだ場合に起こった問題。モーダルを閉じても動画が止まらないことがわかりました。YouTube公式のマニュアルを参考に実装しました。

YouTube埋め込み部分のタグ

<div id="ytplayer"></div>

使用するスクリプト

// iframeへのYouTubeAPI埋め込み
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// 'ytplayer' に <iframe> を置き換える処理
var player;
function onYouTubePlayerAPIReady() {
  player = new YT.Player('ytplayer', {
           height: '100%',
           width: '100%',
           videoId: 'oEcY98MFRR8'
  });
}

// モーダルを閉じる処理の中で入れるコード
player.stopVideo();

これによってモーダルを閉じると同時に動画も止まるようになりました。
しかし、これだけでは足りません。ボタンごとに表示される動画が切り替わる必要があります。

切り替え制御の実装

　それでは今回の本題です。まず埋め込む要素を必要数用意し、パラメーターを定義する変数を配列にします。

YouTube埋め込み部分のタグ

<div id="ytplayer-call-nippon"></div>
<div id="ytplayer-chant-vamosnippon"></div>
<!-- 埋め込む数だけ定義 -->

パラメータ部分の変更

var player = [];
function onYouTubePlayerAPIReady() {
  player[0] = new YT.Player('ytplayer-call-nippon', {
           height: '100%',
           width: '100%',
           videoId: 'JHrh_MX69T0'
  });
  player[1] = new YT.Player('ytplayer-chant-vamosnippon', {
           height: '100%',
           width: '100%',
           videoId: '9jSQvqjgNCc'
  });
  // 埋め込む数だけ定義
}

このままにすると全ての動画が表示されてしまいますのでCSSでコントロールします。
ボタンが押された際に全体からshowクラスを削除し、ボタンに対応する部分にshowクラスを付与します。

CSS

[id^="ytplayer"]{
  display: none;
}
[id^="ytplayer"].show{
  display: block;
}

さいごに

　今回紹介した方法が最適でないかもしれません。理由としてはこちらphpを使ったCMS化を考えていましてphpでコードを生成しやすい構造を考えたからです。「もっといい方法があるよ！」ということでしたら是非コメントにて教えてください！他にもプログラミングやデザインでアドバイスくださるととても嬉しいです！