iOS SafariでYTPlayerの自動再生が効かない件

「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>