「jquery.mb.YTPlayer」でウェブサイトに埋め込んだYouTube背景動画は、iOSのSafariで自動再生されません。
なぜなら、モバイル環境のSafariではメディアの自動再生が許可されていないのです。
「警告: ユーザーが費用負担する携帯電話ネットワーク経由で要求していないダウンロードを防止するために、iOS の Safari では組み込みメディアを自動再生できません。必ずユーザーが自分で再生します。」
https://developers.google.com/youtube/iframe_api_reference?hl=ja#Mobile_considerations
間に合わせの解決方法:YTPlayerではなくIframe APIを使う
YTPlayerは使用せず、Iframe APIを使用します。
autoplayが効かないので、eventsのonReady・onStateChangeの時に再生を実行させます。
const tag = document.createElement('script')
tag.src = "https://www.youtube.com/iframe_api"
const firstScriptTag = document.getElementsByTagName('script')[0]
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag)
let player
window.onYouTubeIframeAPIReady = function () {
YT.ready(function () {
player = new YT.Player('player', {
videoId: '動画ID',
playerVars: {
'playsinline': 1,
'showYTLogo': false,
'showControls': false,
'showAnnotations': false,
'controls': 0,
'rel': 0,
},
events: {
onReady: onPlayerReady,
onStateChange: onPlayerStateChange
}
})
})
}
function onPlayerReady (event) {
$('body').addClass('yt-loaded');//ロード完了時にbodyにクラスを付ける
event.target.mute()
event.target.playVideo()
}
function onPlayerStateChange (event) {
if (event.data === YT.PlayerState.ENDED) {
event.target.playVideo()
}
}
最初にYouTube再生ボタンが一瞬だけ表示されてしまうので、次のように1秒ほど待ってからフェードインさせるとごまかせます。
iframe#player {
opacity: 0;
transition: .2s;
transition-delay: 1s;
}
.yt-loaded iframe#player {
opacity: 1;
}
そもそもYouTubeを背景動画にすることは適切ではない
YouTubeというサービスは動画共有によってユーザーを集め、動画広告を流す事によって収益を得ている会社です。
そのため、YouTubeをサイト埋め込みのためのストレージとして利用する方法は適切ではありません。
YouTubeは度々仕様変更をしているので、埋め込み動画のインターフェイスの形状が変わったり、もし無関係な広告が差し込まれるようなことがあれば、ウェブサイトのブランドが脅かされる事態になります。
最近はネットワーク速度が格段に向上しているので、無難にmp4動画を埋め込んだ方がいいでしょう。
<video src="images/video.mp4" poster="images/video-thumb.jpg" autoplay loop playsinline muted></video>