YouTubeの埋め込み動画を自動再生する

YouTubeの埋め込み動画を自動再生する実装をしようとした際、少しうまくいかないことがあったので対応方法をメモ。

うまくいかなかった例

まずはうまくいかなかった例です。
iframeで埋め込んだ際に、パラメータでautoplayやmuteを設定してみます。

<iframe src="https://www.youtube.com/embed/E7ZoxfoRxWw?autoplay=1&mute=1&playsinline=1" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

これでPCで閲覧した際は問題なかったのですが、iOSとAndroidともに手持ちのスマホだと自動再生ができませんでした。
うまくいかなかった場合のデモページ

設定としては同じですが、YouTube Player APIを使って埋め込むパターンも試してみます。

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

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

function onYouTubeIframeAPIReady() {
	new YT.Player('sample', {
		videoId: 'E7ZoxfoRxWw',
		playerVars: {
			autoplay: 1,
			mute: 1,
			playsinline: 1
		}
	});
}

この場合も先ほどと同様、スマホで自動再生ができませんでした。
うまくいかなかった場合のデモページ2

成功した例

YouTube Player APIを使うのは前の例と同じですが、パラメータを使うのではなくmute()やplayVideo()を使って実装すると、スマホでも自動再生できるようでした。

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

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

let ytPlayer;
function onYouTubeIframeAPIReady() {
	ytPlayer = new YT.Player('sample', {
		videoId: 'E7ZoxfoRxWw',
		playerVars: {
			playsinline: 1
		},
        events: {
            'onReady': onPlayerReady
        }
	});
}

// YouTubeの準備完了後、ミュートにして再生開始
function onPlayerReady(e) {
	ytPlayer.mute();
	ytPlayer.playVideo();
}

これでPCとスマホともに自動再生ができました。
埋め込み動画の自動再生のデモページ