「YouTube API」を使って複数の動画を管理してみた

どうもですよ、はやちですよ( ˘ω˘)☝
今回は「YouTube API」で動画を複数管理する方法と、モーダルの対応をご紹介したいと思います。

実装方法

HTML／サムネイルの部分

トリガーとなるサムネイルに、js-modal-trigger-1 と順々に設定しておきます。

<div class="l-thumbnail">
    <ul class="thumbnail">
      <li class="thumbnail__list" id="js-modal-trigger-1">
        <span class="thumbnail__over"></span>
        <img src="assets/images/youtube-01.jpg" alt="">
      </li>
	  <li class="thumbnail__list" id="js-modal-trigger-2">
        <span class="thumbnail__over"></span>
        <img src="assets/images/youtube-02.jpg" alt="">
      </li>	
      <!--省略-->
    </ul>
</div>

HTML／モーダルの部分

モーダルの部分も、表示されるものに js-modal-target-1 と順に設定しておきます。
js-modal-item-1 はYouTubeの動画を設定。js-movie-close-1 も、ひとつひとつに対して非表示のトリガーをつくりたいので設定します。

<div class="l-modal">
    <ul class="modal__wrap">
      <li class="modal__list" id="js-modal-target-1">
        <div class="btn-movie-close" id="js-movie-close-1">
          <span class="btn-movie-close__icon"></span>
          <span class="btn-movie__bg"></span>
        </div>
        <div class="modal__target" id="js-modal-item-1"></div>
      </li>
      <li class="modal__list" id="js-modal-target-2">
        <div class="btn-movie-close" id="js-movie-close-2">
          <span class="btn-movie-close__icon"></span>
          <span class="btn-movie__bg"></span>
        </div>
        <div class="modal__target" id="js-modal-item-2"></div>
      </li>
		<!--省略-->
	</ul>
    <div class="modal__bg"></div>
</div>

jsで表示するための配列を用意

マークアップで設定しておいたidと、YouTubeのIDを設定します。

let ytModalPlayer = [];
	let ytData = [
    {
        id: 'youtubeのID', //youtubeのID
        area: 'js-modal-item-1', //youtube表示する場所
        target: '#js-modal-target-1', //表示されるするモーダル
        trigger: '#js-modal-trigger-1', //モーダルのトリガー
        close: '#js-movie-close-1' //非表示のトリガー
    },
    {
        id: 'youtubeのID',
        area: 'js-modal-item-2',
        target: '#js-modal-target-2',
        trigger: '#js-modal-trigger-2',
        close: '#js-movie-close-2'
    }
		//省略
	]

配列をループしてYouTubeを設定

配列をループしてYouTubeの設定を行ったのち、表示対象のモーダルを設定します。

let $modal = $('.l-modal');

function onYouTubeIframeAPIReadyModal() {
    //配列をループ
    for (let i = 0; i < ytData.length; i++) {
        ytModalPlayer[i] = new YT.Player(
            ytData[i]['area'],  //youtube表示する場所
            {
                width: 800,
                height: 450,
                videoId: ytData[i]['id'], //youtubeのID
                playerVars: {
                    rel: 0,
                    loop: 0, 
                    playlist: ytData[i]['id'], //youtubeのID
                    showinfo: 0, // 動画情報を表示しない
                    modestbranding: 1
                }
            });

        //モーダルの表示非表示
        $(ytData[i]['trigger']).on('click', ()=> {
            $modal.fadeIn();
            $(ytData[i]['target']).addClass('is-show');
        });

        $(ytData[i]['close']).on('click', ()=> {
            $modal.fadeOut();
            $(ytData[i]['target']).removeClass('is-show');
            ytModalPlayer[i].pauseVideo();
        });

    }
}

windowloadしたあとに、YouTubeの設定とモーダルがあわさった関数を呼び出します。

window.addEventListener('load', ()=> {
    onYouTubeIframeAPIReadyModal();
});

これで完了でございます( ˇωˇ )
できあがったものはこちら公開しておりますので、ぜひ御確認くださいまし……。
( ˘ω˘)☞三☞ｼｭｯｼｭｯ

YoutubeモーダルDEMO

まとめ

いかがでしたか？ 今回はモーダル形式で紹介しましたが、ページに複数のYouTube動画を表示させるだけでしたら、オブジェトをidとareaのみにしておけば対応ができますよ。

ではでは、はやちでした( ˇωˇ )ノシ

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。