YouTube Player API で動画を埋め込む方法

ホームページにYouTube動画を埋め込む場合、YouTubeサイトでiframeタグを生成して埋め込むことができます。
しかし、iframeタグでの埋め込みだけでは「再生・停止・一時停止・音量調整」のような、動画の制御を行うことができません。
IFrame Player APIを使うと、JavaScriptでプレーヤーを制御することができ、ユーザーの動作に合わせてプレーヤーを自由に操ることが可能になります。

基本的な表示

基本的には、次のコードを記述することでYouTube動画を表示することができます。

HTML

<div id="player"></div>

JavaScript

//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 playerの埋め込み
var player;
function onYouTubeIframeAPIReady() {
	player = new YT.Player('player', {
		width: '640', //プレーヤーの幅
		height: '360', //プレーヤーの高さ
		videoId: 'M7lc1UVf-VE', //YouTubeのID
	});
}

自動再生する方法

ページが読み込まれた後に、YouTube動画を自動再生する場合は、次のコードを使います。

HTML

<div id="player"></div>

JavaScript

JavaScriptは関数で設定する方法と、パラメーターで設定する方法があります。

関数で設定

//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 playerの埋め込み
var player;
function onYouTubeIframeAPIReady() {
	player = new YT.Player('player', {
		width: '640',
		height: '360',
		videoId: 'M7lc1UVf-VE',
		events: {
			'onReady': onPlayerReady //自動再生の設定
		}
	});
}

//自動再生の設定
function onPlayerReady(event) {
	event.target.playVideo();
}

onPlayerReady関数で、動画プレーヤーの準備が整ったら自動再生をするという設定をしています。

パラメーターで設定

//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 playerの埋め込み
var player;
function onYouTubeIframeAPIReady() {
	player = new YT.Player('player', {
		width: '640',
		height: '360',
		videoId: 'M7lc1UVf-VE',
		playerVars: {
			autoplay: 1 //自動再生の設定
		}
	});
}

ループ再生する方法

動画の再生が終わり、繰り返し動画を再生する場合は、次のコードを使います。

HTML

<div id="player"></div>

JavaScript

JavaScriptは関数で設定する方法と、パラメーターで設定する方法があります。

関数で設定

//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 playerの埋め込み
var player;
function onYouTubeIframeAPIReady() {
	player = new YT.Player('player', {
		width: '640',
		height: '360',
		videoId: 'M7lc1UVf-VE',
		events: {
			'onStateChange': onPlayerStateChange //プレーヤーの状態設定
		}
	});
}

//プレーヤーの状態設定
function onPlayerStateChange(event) {
	//動画が終了したときの設定
	if(event.data == YT.PlayerState.ENDED){
		event.target.playVideo();
	}
}

プレーヤーの状態が変化するとonPlayerStateChange関数が呼び出されます。
状態の変化とは、プレーヤーの再生、一時停止、終了などを示します。

if(event.data == YT.PlayerState.ENDED)で動画の終了を判定して、event.target.playVideo()で動画を再生しています。

パラメーターで設定

//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 playerの埋め込み
var player;
function onYouTubeIframeAPIReady() {
	player = new YT.Player('player', {
		width: '640',
		height: '360',
		videoId: 'M7lc1UVf-VE',
		playerVars: {
			loop: 1, //ループの設定
        	playlist: 'M7lc1UVf-VE' //YouTubeのID
		}
	});
}

コントロールバーを非表示にする方法

HTML

<div id="player"></div>

JavaScript

//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 playerの埋め込み
var player;
function onYouTubeIframeAPIReady() {
	player = new YT.Player('player', {
		width: '640',
		height: '360',
		videoId: 'M7lc1UVf-VE',
		playerVars: {
			controls: 0 //コントロールバーを非表示
		}
	});
}

コントロールバーを非表示にする方法は、パラメーターで設定します。
playerVarsにcontrols: 0を指定することで非表示にすることができます。

軽量な読み込み方法

iframeタグでYouTube動画が読み込まれると、ページの読み込み速度が遅くなってしまいます。
この問題を解消するためには、imgタグでサムネイル画像を埋め込んで、サムネイル画像をクリックしたときに、iframeタグのYouTube動画に切り替える方法があります。

HTML

<div id="player"></div>

JavaScript

//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 playerの埋め込み
var player;
var youtubeId = 'M7lc1UVf-VE';
function onYouTubeIframeAPIReady() {
	//サムネイル画像埋め込み
	document.getElementById('player').innerHTML = '<img id="player-toggle" src="http://img.youtube.com/vi/' + youtubeId + '/maxresdefault.jpg">';
	//サムネイル画像クリック後iframe動画に変更
	document.getElementById('player-toggle').addEventListener('click', function() {
		player = new YT.Player('player',{
			width: 640,
			height: 360,
			videoId: youtubeId,
			events: {
				'onReady': onPlayerReady //自動再生の設定
			}
		});
	});
}
//自動再生の設定
function onPlayerReady(event) {
	event.target.playVideo();
}

innerHTMLでサムネイル画像を埋め込みます。
それからaddEventListenerで、サムネイル画像をクリックしたときにYouTube動画が埋め込まれるようにしています。

まとめ

YouTube Player APIの埋め込み方法を紹介しました。
通常のiframeタグの埋め込みだけでは、プレーヤーの操作に限界がありますので、APIを活用して柔軟に操作をしてみましょう。
今回の記事作成にあたり、参考にした記事と、公式リファレンスを共有しますので、こちらも参考にしてみてください。

• iframe 組み込みの YouTube Player API リファレンス
• YouTube Player APIを使う時のtips集