YouTubeの初期表示をサムネイルにする

同一ページ内に複数のYouTubeを埋め込むと、ページの読み込みが重くなってしまいます。
その対応として、初期表示はサムネイル画像を表示して、サムネイルをクリック後にYouTubeを埋め込むようにしてみます。

サンプルコード

HTML

#sample1～#sample3にサムネイル画像が入ります。

<div id="contents">
	<div class="ytBox">
		<div id="sample1"></div>
	</div>
	<div class="ytBox">
		<div id="sample2"></div>
	</div>
	<div class="ytBox">
		<div id="sample3"></div>
	</div>
</div>

CSS

サムネイル画像にオンマウス時にカーソルが変わるようにしておきます。

.ytBox img {
	cursor: pointer;
}

JavaScript

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 ytPlayer = [];
// プレーヤーのサイズ
var ytWidth = 640;
var ytHeight = 480;
// 各動画情報
var ytData = [
	{
		id: 'TSbSzrLffew',
		area: 'sample1'
	}, {
		id: 'fQ_m5VLhqNg',
		area: 'sample2'
	}, {
		id: 'p3ih4rDduug',
		area: 'sample3'
	}
];

// サムネイルの埋め込み
function onYouTubeIframeAPIReady() {
	for(var i = 0; i < ytData.length; i++) {
		// サムネイルの埋め込み
		document.getElementById(ytData[i]['area']).innerHTML = '<img id="yt-thumb' + i + '" src="http://i.ytimg.com/vi/' + ytData[i]['id'] + '/sddefault.jpg">';
		// 埋め込んだサムネイルにイベント追加
		ytEmbedding(i);
	}
}

// プレーヤーの埋め込み
function ytEmbedding(i) {
	document.getElementById('yt-thumb' + i).addEventListener('click', function() {
		ytPlayer[i] = new YT.Player(ytData[i]['area'], {
			width: ytWidth,
			height: ytHeight,
			videoId: ytData[i]['id'],
			playerVars: {
				rel: 0
			},
			events: {
				'onReady': onPlayerReady
			}
		});
	});
}

// プレーヤー読み込み後の処理
function onPlayerReady(e) {
	e.target.playVideo();
}

YouTubeの初期表示をサムネイルにするのデモページ