iOSでJavaScriptからのYouTubeの再生ができない

埋め込まれたYouTubeの前面に要素を重ねて、その要素がクリックされたらJavaScriptでYouTubeを再生させるという処理を実装しようとしていたのですが、iOSだとうまく再生できないようだったのでいくつか試してみました。

サンプルコード

(1)通常の埋め込み、(2)自動再生処理を追加しているパターン、(3)YouTubeの前にレイヤーを重ねたパターン、(4)再生ボタンを配置したパターンの4種類を試してみます。

HTML

sample01～sample04にYouTubeが埋め込まれます。

<div class="yt-wrap">
	<p>通常の埋め込み</p>
	<div class="yt-inner">
		<div id="sample01"></div>
	</div>
</div>

<div class="yt-wrap">
	<p>自動再生処理を追加しているパターン</p>
	<div class="yt-inner">
		<div id="sample02"></div>
	</div>
</div>

<div class="yt-wrap">
	<p>YouTubeの前にレイヤーを重ねたパターン</p>
	<div class="yt-inner">
		<div id="sample03"></div>
		<div id="sample03-layer"></div>
	</div>
</div>

<div class="yt-wrap">
	<p>再生ボタンを配置したパターン</p>
	<div class="yt-inner">
		<div id="sample04"></div>
	</div>
	<div class="yt-control">
		<button id="sample04-play">再生</button>
	</div>
</div>

CSS

YouTubeの前にレイヤーを重ねたパターンでは、YouTubeと同じサイズの要素を前面に重ねるようにします。

#sample03-layer {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	border: #ff0000 10px solid;
	cursor: pointer;
}

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 ytPlayer = [];
// プレーヤーのサイズ
var ytWidth = 640;
var ytHeight = 390;
// 各動画情報
var ytData = [
	{
		id: 'O_Qr4gdLyRc',
		area: 'sample01'
	}, {
		id: 'eQ-N5rFuM5g',
		area: 'sample02'
	}, {
		id: '1f90nLaHW8U',
		area: 'sample03'
	}, {
		id: 'y-1iyViZJwo',
		area: 'sample04'
	}
];

// 各プレーヤーの埋め込み
function onYouTubeIframeAPIReady() {
	for(var i = 0; i < ytData.length; i++) {
		ytPlayer[i] = new YT.Player(ytData[i]['area'], {
			width: ytWidth,
			height: ytHeight,
			videoId: ytData[i]['id'],
			playerVars: {
				rel: 0
			},
			events: {
				'onReady': onPlayerReady
			}
		});
	}
}

// 各プレーヤー準備完了後の処理
function onPlayerReady(e) {
	// 自動再生のパターンだけ再生開始
	if(e.target.getIframe().id == ytData[1]['area']) {
		ytPlayer[1].playVideo();
	}
}

// レイヤークリックで再生
document.getElementById('sample03-layer').addEventListener('click', function() {
	ytPlayer[2].playVideo();
});

// ボタンクリックで再生
document.getElementById('sample04-play').addEventListener('click', function() {
	ytPlayer[3].playVideo();
});

iOSでJavaScriptからのYouTubeの再生ができるかどうかのデモページ
　

結果

iOS6.1.6と8.4.1で確認しました。

通常の埋め込み

iOS6、iOS8ともに再生されました。

自動再生処理を追加しているパターン

iOS6ではローディングがずっと表示されたままで自動再生されませんでした。
YouTubeをタップすると再生はできましたが、ローディングの出ているYouTubeの中央あたりをタップしても反応しませんでした。

iOS8では「すぐに再生が開始しない場合は、端末を再起動してください。」と表示され、自動再生されませんでした。
YouTubeをタップすると再生はできました。

YouTubeの前にレイヤーを重ねたパターン

iOS6ではレイヤーをタップしても何も反応しませんでした。

iOS8ではレイヤーをタップすると、「すぐに再生が開始しない場合は、端末を再起動してください。」と表示され、再生できませんでした。

再生ボタンを配置したパターン

iOS6ではボタンをタップするとローディングがずっと表示されたままになり、再生できませんでいた。
その状態でYouTubeをタップすると再生できました。
YouTubeをタップして1回再生した後だと、ボタンのタップでも再生ができるようになりました。

iOS8ではボタンをタップすると、「すぐに再生が開始しない場合は、端末を再起動してください。」と表示され、再生できませんでした。
自動再生のパターンと同じく、その状態でYouTubeをタップすると再生できました。
YouTubeをタップして1回再生した後だと、ボタンのタップでも再生ができるようになりました。
　

iOSのバージョンによって少し挙動が違っていたりするようなので、注意が必要です。
　

【参考サイト】

• YouTube APIとiOSのSafariで困る話: point of view point