どうもですよ、はやちですよ( ˘ω˘)☝
今回は「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動画を表示させるだけでしたら、オブジェトをidとareaのみにしておけば対応ができますよ。
ではでは、はやちでした( ˇωˇ )ノシ
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。