YouTubeのプレーヤーAPIでパラメータをつける

YouTubeをiframeで埋め込む際、URLにパラメータを付けることで、自動再生や関連動画の非表示など色々な設定ができます。

今回、YouTubeプレーヤーAPIを使う時のパラメータの指定方法が分からなかったので、少し調べてみました。

サンプルコード

指定方法を調べてみた結果、playerVarsというプロパティで指定できるようです。

HTML

<div id="sample"></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 ytArea = 'sample';
var ytID = 'wht7uV8kQKo';
var ytWidth = 640;
var ytHeight = 390;

function onYouTubeIframeAPIReady() {
	ytPlayer = new YT.Player(ytArea, {
		height: ytHeight,
		width: ytWidth,
		videoId: ytID,
		// パラメータの指定
		playerVars: {
			rel: 0,
			autoplay: 1,
			playlist: 'ObNybjJ43e0,dix-lB_muio'
		}
	});
}

YouTubeのプレーヤーAPIでパラメータをつけるデモページ

今回指定したパラメータは以下になります。

rel = 再生終了後に関連動画を非表示にする。
autoplay = 動画読み込み後に自動再生をする。
playlist = 最初の動画再生後、指定した動画を順番に再生する。
　

【参考サイト】

• Youtube Javascript API – disable related videos – Stack Overflow