Youtube IFrame Player APIを使ってhtmlに埋め込んだ動画を、初回ページ表示時にモーダルウィンドウで表示します。モーダルウィンドウはjQueryプラグインのjquery.magnific-popup.jsを使用します。動画はレスポンシブ対応にします。
html、css、初回ページ表示時のmagnific-popup起動以外のjavascriptは下記の記事と同様です。
jQueryのコードです。YouTubeの埋め込みとmagnific-popup起動の処理です。
magnific-popupが初回ページ表示時のみ実行される処理は、jQueryプラグインのjquery.cookie.jsを利用します。初回ページ表示時はcookieが格納されていないためmagnific-popupが実行されます。実行後はmagnific-popupのコールバック関数openを利用しcookieを格納します。これでcookie有りの判定になるためリロードやページ遷移をしてから戻ってもmagnific-popupは実行されません。cookieの有効期限を設定していないため、ブラウザを終了するとcookieは削除されます。
//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);
//YouTubeの埋め込み
var ytPlayer;
function onYouTubeIframeAPIReady() {
ytPlayer = new YT.Player('movie-content01', {
width: 800,
height: 450,
videoId: 'ZRCdORJiUgU',
events: {
'onReady': onPlayerReady,
},
playerVars: {
rel: 0, //再生動画と同じチャンネルから関連動画を選択
modestbranding: 1 //YouTubeロゴを表示しない
}
});
}
function onPlayerReady(event) {
event.target.mute(); //音声をミュートに
event.target.playVideo(); //動画再生
}
$(function() {
var cookieCheck = $.cookie('modalStatus');
if(!cookieCheck){
$.magnificPopup.open({
items: {
src: '#movie01'
},
mainClass: 'mfp-fade01',
removalDelay: 200,
callbacks: {
open: function() {
$.cookie('modalStatus', 'modalStart');
}
}
});
}
});