【ムービー】初回ページ表示時にモーダルウィンドウでYoutubeの動画を自動再生

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

タイトルとURLをコピーしました