youtubeをページに埋め込んだがスマホの再生ができない

YouTubeIframeAPIを使ってオートでミュート再生ができるscriptを実装しています。

以下のようにコードを埋め込んだのですが、
スマホの再生ができません。

スマホでもオートでミュート再生ができるようにするにはどうすれば
いいでしょうか。

現状としてずっと〇が表示されてクルクル回っている状態です。
ただし画面にあるyoutubeのロゴをクリックしたらyoutubeのサイトに飛び、再生できます。
※iphone7plusのsafari・chromeにて確認

埋め込んだコードは以下です

■html

<div class="embed-responsive embed-responsive-16by9">
  <div id="player"></div>
</div>

■js

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

// YouTubeの埋め込み
    function onYouTubeIframeAPIReady() {
        ytPlayer = new YT.Player(
            'player', // 埋め込む場所の指定
            {
                videoId: 'youtubeコード', // YouTubeのID
                playerVars: {
                    loop: 1,//0:ループしない 1:ループする 1の場合playlist設定必須
                    playlist: 'youtubeコード',//次に流すYoutubeのID
                    controls: 1,//コントローラー無し
                    autoplay: 1,//オートプレイ
                    showinfo: 0,//動画タイトルなど表示しない
                    playsinline: 1,
                    rel: 0,
                    wmode: 'transparent',
                    enablejsapi: 1
                },
                events: {
                    'onReady': onPlayerReady
                }
            }
        );
    }
//プレイ準備完了後
      function onPlayerReady(event) {
        event.target.playVideo();
        event.target.mute();
      }

以上ご教示いただければありがたいです。