【ムービー】ページ表示時にモーダルウィンドウでYoutubeの動画を自動再生【レスポンシブ編】

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
	});
});