iframe 組み込みの YouTube Player をモーダル表示して自動再生したい

iframe 組み込みの YouTube Player をモーダルに表示して、さらにモーダルを表示したタイミングで自動再生したい。あと、同一ページで2つの YouTube 動画を扱うパターン。

YouTube のモーダル表示については軽くググったらいい感じのライブラリがあった。

が、YouTube の仕様でモバイル環境では自動再生 (autoplay) ができない模様...。

YouTube Player API Reference for iframe Embeds - Google Developers

「警告: ユーザーが費用負担する携帯電話ネットワーク経由で要求していないダウンロードを防止するために、iOS の Safari では組み込みメディアを自動再生できません。必ずユーザーが自分で再生します。」

少し調べた感じでは、このライブラリを使う以上はモバイル環境での自動再生が厳しそうなので自分で API を叩くことにしました。備忘録。

サンプルコード。

<!-- それぞれの YouTube 動画を再生するためのボタンがあるイメージ -->
<div class="btn" data-video-id="xxxxx" data-channel="youtube">YouTube 1</div>
<div class="btn" data-video-id="yyyyy" data-channel="youtube">YouTube 2</div>

<!-- モーダルは普通のやつ -->
<div id="modal-overlay">
  <div id="modal-wrap">
    <div id="modal-content">
      <div class="inner">
        <!-- ここに iframe の YouTube Player が差し込まれる  -->
        <div id="player"></div>
      </div>
      <p class="modal-close">閉じる</p>
    </div>
  </div>
</div>

イベントハンドラと YouTube API の呼び出し。

$(function() {
  $('.btn').click(function() {
    $('#modal-overlay, #modal-content').fadeIn();
    //player.playVideo();
    player.loadVideoById($(this).data('videoId'));
  });
  $('#modal-overlay, .modal-close').click(function() {
    $('#modal-overlay, #modal-content').fadeOut();
    player.stopVideo();
  });
});

var player;
function onYouTubePlayerAPIReady() {
  player = new YT.Player('player', {
    width: '640',
    height: '360',
    videoId: '',
    playerVars: {
      'autoplay': 1,
      'controls': 1
    },
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    },
  });
}
function onPlayerReady(event) {
}
function onPlayerStateChange(event) {
}

モーダルを表示したタイミングで Player#playVideo を呼び出せばイケると思ったけど、任意の動画IDが指定できない。そこで、YT.Player の videoId を空で初期化しておきつつ、再生したいタイミングで Player#loadVideoById に任意の動画IDが指定して呼び出す。