YouTubeプレーヤーAPIでプレーヤーに別の動画を読み込む

YouTubeのプレーヤーに別の動画を読み込ませる方法をメモ。

サンプルコード

読み込ませる方法はYouTube IDを指定する方法とURLを指定する方法があります。

HTML

<div id="sample"></div>
<div class="button-area">
	<button id="cueVideoId">IDから動画読み込み</button>
	<button id="loadVideoId">IDから動画読み込み + 再生</button>
	<button id="cueVideoUrl">URLから動画読み込み</button>
	<button id="loadVideoUrl">URLから動画読み込み + 再生</button>
</div>

JavaScript

// YouTube 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 ytArea = 'sample';
var ytID = 'DJwMOnaci8o';

// API読み込み後にプレーヤー埋め込み
function onYouTubeIframeAPIReady() {
	ytPlayer = new YT.Player(ytArea, {
		width: 640,
		height: 390,
		videoId: ytID
	});
}

// IDから動画を読み込む
document.getElementById('cueVideoId').addEventListener('click', function() {
	ytPlayer.cueVideoById('8QjqkATvH9M');
}, false);

// IDから動画を読み込んで再生する
document.getElementById('loadVideoId').addEventListener('click', function() {
	ytPlayer.loadVideoById('rqHsEVwYdX4');
}, false);

// URLから動画を読み込む
document.getElementById('cueVideoUrl').addEventListener('click', function() {
	ytPlayer.cueVideoByUrl('http://www.youtube.com/v/pp70baXff_Q');
}, false);

// URLから動画を読み込んで再生する
document.getElementById('loadVideoUrl').addEventListener('click', function() {
	ytPlayer.loadVideoByUrl('http://www.youtube.com/v/zdoBFSBQMfs');
}, false);

プレーヤーに別の動画を読み込ませるデモページ

他にも引数で再生開始位置や再生画質も設定できるようなので、詳しくは公式ドキュメントをご確認ください。
　

【参考サイト】

• iframe 組み込みの YouTube Player API リファレンス  |  YouTube IFrame Player API  |  Google Developers