Youtube IFrame Player APIを使ってhtmlに埋め込んだ動画を、ページ表示時にモーダルウィンドウで表示します。モーダルウィンドウはjQueryプラグインのcolorboxを使用します。
htmlのコードは下記になります。colorbox起動用のaタグで動画を表示するdivタグを囲います。動画を表示するdivタグにはidを付与し、aタグのhref属性でdivタグのidを指定します。
<a href="#movie01" class="movie-open">
<div id="movie01" class="movie-content-wrap">
<div id="movie-content01"></div>
</div>
</a>
続いてCSSのコードです。
インラインのhtmlをcolorboxで表示する場合、インラインhtmlの親要素を非表示にする必要があります。そこでaタグにdisplay: noneを設定します。本来aタグをクリックでcolorboxを起動するため非表示では困りますが、今回はページ表示時に自動でcolorboxを起動するため非表示で問題ありません。
.movie-open {
display: none;
}
.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%;
}
最後にjQueryのコードです。YouTubeの埋め込みとcolorbox起動の処理です。
YouTubeの自動再生はonReadyイベントを起動してonPlayerReady関数を実行します。
colorboxの起動はオプションでopen: trueを指定するとページ表示時に実行されます。また今回はインラインhtmlを表示するためinline: trueを指定します。
//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() {
$('.movie-open').colorbox({
open: true,
inline: true,
innerWidth: 800,
innerHeight: 450,
opacity: 0.7,
});
});