【ムービー】Youtube IFrame Player APIで複数の動画埋め込み

Youtube IFrame Player APIを使って複数の動画をhtmlに埋め込みます。動画はレスポンシブ対応にします。

htmlのコードは下記になります。
idを付与したdivタグが、指定したyoutubeの動画を読み込んだiframeタグに置き換わります。クラス名movie-content-wrapのdivタグはレスポンシブ対応用です。

<div class="movie-content-wrap">
	<div id="movie-content01"></div>
</div>
<div class="movie-content-wrap">
	<div id="movie-content02"></div>
</div>

続いてCSSのコードです。
動画のレスポンシブ対応の指定です。divタグがiframeタグに置き換わるため、CSSのセレクタもiframeタグを指定します。

.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%;
}

最後にjavascriptのコードです。
まず、scriptタグを生成しYoutube用のIFrame Player APIを読み込んでhtml上に設置します。次に変数ytDataにYoutubeのIDとyoutubeを表示する場所を指定します。youtubeを表示する場所はhtmlに記述したdivタグのクラス名になります。最後にonYouTubeIframeAPIReady以下でyoutubeを埋め込みます。playerVarsでパラメータの設定ができます。今回はrel: 0の指定で再生動画と同じチャンネルから関連動画を選択しています。またmodestbranding: 1の指定でプレーヤーにYouTubeロゴを表示しない設定にしています。

//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 ytPlayer = [];
var ytData = [
	{
		id: 'ZRCdORJiUgU', //youtubeのID
		area: 'movie-content01', //youtubeを表示する場所
	},
	{
		id: '6aFdEhEZQjE',
		area: 'movie-content02',
	}
];

//YouTubeの埋め込み
function onYouTubeIframeAPIReady() {
	for (var i = 0; i < ytData.length; i++) {
		ytPlayer[i] = new YT.Player(ytData[i]['area'], {
			width: 800,
			height: 450,
			videoId: ytData[i]['id'],
			playerVars: {
				rel: 0, //再生動画と同じチャンネルから関連動画を選択
				modestbranding: 1 //YouTubeロゴを表示しない
			}
		});
	}
}