【ムービー】Youtube IFrame Player APIを利用してサムネイル画像クリックで動画再生

Youtube IFrame Player APIを利用してYoutubeのサムネイル画像クリックで動画を再生します。Youtubeのサムネイル画像は複数用意して複数の動画再生に対応させます。動画はレスポンシブ対応にします。

htmlのコードは下記になります。
Youtubeのサムネイル画像はliタグ内にjQueryで動的に配置するため空のulタグだけ記述します。サムネイル画像クリック時の動画を再生する場所はid名movie-contentのdivタグになります。divタグはyoutubeの動画読み込みのタイミングでiframeタグに置き換わります。クラス名movie-content-wrapのdivタグはレスポンシブ対応用です。

<div class="movie-content-wrap">
	<div id="movie-content"></div>
</div>
<ul id="movie-thumb"></ul>

続いてCSSのコードです。動画のレスポンシブ対応とサムネイル画像の配置を指定します。

.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%;
}
#movie-thumb {
	display: flex;
	margin: 20px 0 1.4em;
}
#movie-thumb li:first-child{
	margin: 0 20px 0 0;
}
#movie-thumb li img{
	cursor: pointer;
}
@media screen and (max-width: 690px) {
	#movie-thumb {
		display: block;
	}
	#movie-thumb li:first-child{
		margin: 0 0 20px;
	}
}

最後にjavascript及びjQueryのコードです。
サムネイル画像の埋め込み準備で、liタグ内にyoutubeのIDが含まれるサムネイル画像のURLを画像のsrc属性に設定します。YouTubeの埋め込みは配列ytDataの最初の動画を指定します。サムネイル画像クリック時の動作はクリックしたサムネイル画像のsrc属性からyoutubeのIDを取り出しytPlayer.loadVideoByIdで動画を再生します。loadVideoByIdはYoutube IFrame Player APIで利用できる関数で、指定されたyoutubeのIDを読み込んで動画を再生します。第2引数は再生開始位置ですが省略可能です。

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

var thumbInsert = '';
var ytPlayer;
var ytData = [
	{
		id: 'ZRCdORJiUgU' //youtubeのID
	},
	{
		id: '6aFdEhEZQjE'
	}
];

//サムネイル画像の埋め込み準備
for(var i = 0; i < ytData.length; i++) {
	thumbInsert += '<li>';
	thumbInsert += '<img src="http://img.youtube.com/vi/' + ytData[i]['id'] + '/mqdefault.jpg" alt="">';
	thumbInsert += '</li>';
}

//YouTubeの埋め込み
window.onYouTubeIframeAPIReady = function() {
	ytPlayer = new YT.Player('movie-content', {
		width: 800,
		height: 450,
		videoId: ytData[0]['id'],
		playerVars: {
			rel: 0,
			modestbranding: 1
		}
	});
}

//動画の再生
function play(ytId, seekTime) {
	ytPlayer.loadVideoById(ytId, seekTime);
}

$(function() {
	//サムネイル画像の埋め込み
	$('#movie-thumb').append(thumbInsert);

	//サムネイル画像クリック時の動作
	$('#movie-thumb li img').on('click', function() {
		ytId = $(this).attr('src').replace('http://img.youtube.com/vi/', '');
		ytId = ytId.replace('/mqdefault.jpg', '');
		play(ytId, 0);
		return false;
	});
});