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

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

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