YouTubeプレーヤーAPIをjQueryで扱う

YouTubeプレーヤーAPIでプレーヤーを埋め込み、$(function)内で再生をしようとした時に、少しうまくいかない部分があったので対応方法をメモしておきます。

サンプルコード

$(function) 内で再生を実行させたかったので、以下のようにしてみました。

HTML

<div id="sample"></div>

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 ytArea = 'sample';
var ytID = '1_n_k5nNA3A';
var ytWidth = 640;
var ytHeight = 390;

function onYouTubeIframeAPIReady() {
	ytPlayer = new YT.Player(ytArea, {
		height: ytHeight,
		width: ytWidth,
		videoId: ytID
	});
}

$(function() {
	ytPlayer.playVideo();
});

YouTubeプレーヤーAPIをjQueryで扱うデモページ1
$(function)内で別の処理を行ってからYouTubeを再生させたかったのですが、YouTubeが読み込まれる前にytPlayer.playVideo(); を実行しているため、ytPlayer is not definedとエラーが出てしまいます。
　

サンプルコード

YouTubeの読み込みが完了してから、ytPlayer.playVideo(); を実行するようにして対応しました。

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 ytArea = 'sample';
var ytID = '1_n_k5nNA3A';
var ytWidth = 640;
var ytHeight = 390;

function onYouTubeIframeAPIReady() {
	ytPlayer = new YT.Player(ytArea, {
		height: ytHeight,
		width: ytWidth,
		videoId: ytID,
		events: {
			'onReady': onPlayerReady
		}
	});
}

var ytReady = false;
function onPlayerReady(e) {
	ytReady = true;
}

$(function() {
	function ytCheck() {
		if(ytReady) {
			ytPlayer.playVideo();
		} else {
			setTimeout(ytCheck, 200);
		}
	}
	ytCheck();
});

YouTubeプレーヤーAPIをjQueryで扱うデモページ2