Youtube IFrame Player APIを使ってhtmlに埋め込んだ動画を、ページ表示時にモーダルウィンドウで表示します。モーダルウィンドウはjQueryプラグインのjquery.magnific-popup.jsを使用します。動画はレスポンシブ対応にします。
htmlのコードは下記になります。
id名movie-content01を付与したdivタグが、指定したyoutubeの動画を読み込んだiframeタグに置き換わります。クラス名movie-content-wrapのdivタグはレスポンシブ対応用です。またmagnific-popupで表示する対象ソースの指定用にid名movie01を付与します。
<div id="movie01" class="movie-content-wrap mfp-hide">
<div id="movie-content01"></div>
</div>
続いてCSSのコードです。
動画のレスポンシブ対応で横幅100%を指定する関係で、モーダルウィンドウの横幅はmagnific-popupで自動生成されるクラス名mfp-contentに指定します。padding-topは閉じるボタンをモーダルウィンドウの右上に表示させるための余白です。またモーダルウィンドウのフェードイン・フェードアウトも指定します。
.movie-content-wrap {
position: relative;
width: 100%;
padding-top: 56.25%;
}
.movie-content-wrap iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.mfp-content {
max-width: 800px;
padding-top: 44px;
}
.mfp-fade01.mfp-bg {
opacity: 0;
transition: all 0.2s ease-out;
}
.mfp-fade01.mfp-bg.mfp-ready {
opacity: 0.7;
}
.mfp-fade01.mfp-bg.mfp-removing {
opacity: 0;
}
.mfp-fade01.mfp-wrap .mfp-content {
opacity: 0;
transition: all 0.2s ease-out;
}
.mfp-fade01.mfp-wrap.mfp-ready .mfp-content {
opacity: 1;
}
.mfp-fade01.mfp-wrap.mfp-removing .mfp-content {
opacity: 0;
}
最後にjQueryのコードです。YouTubeの埋め込みとmagnific-popup起動の処理です。
YouTubeの自動再生はonReadyイベントを起動してonPlayerReady関数を実行します。
magnific-popupの起動はセレクタを指定せずopenメソッドを使用するとページ表示時に実行されます。オプションのitemsのsrcで指定したidがモーダルウィンドウで表示する対象ソースです。
//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() {
$.magnificPopup.open({
items: {
src: '#movie01'
},
mainClass: 'mfp-fade01',
removalDelay: 200
});
});