iPhoneのSafariブラウザでのみ、Youtube APIのplayVideo()で動画再生されないことがある

Question

いつもお世話になっております。
現在RailsでWebページを作成しております。

Userがyoutubeの動画IDを登録しており、そのページではそれぞれのユーザーの動画を一覧表示してるような流れです。

複数のyoutubeの埋め込みだと表示が重くなるため、IDからサムネイルを取得し、youtube動画の再生ボタンに似せた画像を用意し、その画像がクリックされたら、youtubeAPIを用いてyoutube動画のiframeを呼び出し再生するという形をとっています。

youtubeAPIのコールバック関数「onPlayerReady」（動画が再生準備ができたら呼ばれる）内で
event.target.playVideo();
という再生メソッドを呼んでいるのですが、iPhoneのSafariブラウザでのみ再生されないことがあります。

youtube動画には置き換わるので、もう一度再生ボタンを押せば、動画は再生されます。
流れとしては一瞬再生するような動き（バッファ中のグルグルが一瞬見える）はあるのですが、すぐ一度も再生されていない状態（youtubeの矢印とサムネイル画像状態）になってしまいます。

PCのChromeやMacのSafariでは同様の症状は起こりません。
iphone safariの実機でデバッグしてみたのですが、特にエラーなどは出ていない状況です。

ググっても分からずこちらに質問させていただきました。
参考になるサイトでも構いませんので、適切な方法をご教示いただけますと幸いです。
よろしくお願いいたします。

#show.html
<% @users.each do |user| %>
<ul class="content">
  <div class="movie_inner">
    <img src="https://i.ytimg.com/vi/<%= user.youtube_id %>/maxresdefault.jpg" alt="" data-video="YouTube ID" width="560" height="315" class="thumb" id="thumb_<%= user.id %>">
    <%= image_tag 'youtube_play_btn.png', class: "play_img", id: "thumb_ytimg_#{user.id}" %>
    <div id="player_<%= user.id %>" class="player"></div>
  </div>
</ul>
<% end %>

<script>
  //Play
  function onPlayerReady(event) {
    // 再生
    event.target.playVideo();

    let player_id_num = event.target.getIframe().id
    let view_id = player_id_num.replace(/[^0-9]/g, '');
    $.ajax({
      url: "/view_check",
      type: "POST",
      data: { id: view_id,
        user_id: user_id
      },
      dataType: "html",
      beforeSend: function(xhr) {
        // sessionの引き継ぎ
        xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'));
      },
      success: function(json) {
         // ajax通信結果による処理
      },
      error: function() {
        alert('動画再生エラー')
      }
    });
  }
  // $('.thumb').click(function() {
  $(document).on('click',".play_img", function() {
    //Youtube埋め込み
    let data = this.id;
    let data_id = data.replace(/[^0-9]/g, '');
    let plaer_name = "player_" + data_id
    // let src_arry = this.prev.src.split('/')
    let src_arry = $(this).prev('img')[0].src.split('/')
    let youtube_id = src_arry[src_arry.length -2]

    player = new YT.Player(plaer_name, {
      height: '100%',
      width: '100%',
      playerVars: {
        autoplay: 0,//オートプレイ
        rel: 0,//関連動画表示オフ
        playsinline: 0
      },
      videoId: youtube_id,
      events: {
        'onReady': onPlayerReady,
      }
    });
    //サムネイル非表示
    let hide_thum_id = "#thumb_" + data_id
    $(hide_thum_id).hide();
    let hide_ytimg_id = "#thumb_ytimg_" + data_id
    $(hide_ytimg_id).hide();
  });
</script>