youtube動画を読み込んだ際にタイトルやシェアボタンなどUIが表示されないようにしたい

デザインを主に担当しているためjsの知識が乏しく、初歩的な質問でしたら申し訳ありません

実現したいこと

前提

jsでyoutubeの動画を呼び出し、表示されるようにしたのですが
動画が読み込まれ再生される際にタイトルやシェアボタンなどUIが表示され、しばらくしたら消えるのですが
最初から表示されないようにしたいです。

他のサイトで自動再生しているにも関わらず、最初にタイトルやシェアボタンが表示されていなかったので
できると思うのですが…どのようにしたらいいのでしょうか。よろしくお願いします

該当のソースコード

//html

<div class="yt-Player" id="video1" data-id="PNUuFiljCpQ1XllO"></div>

//js

if (document.querySelectorAll('.yt-Player').length !== 0) {
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    var ytPlayer = [];
    var ytData = [];

    var target = document.querySelectorAll('.yt-Player');

    for (var i = 0; i < target.length; i++) {
        var thisID = target[i].dataset.id;
        var thisArea = target[i].id;
        var obj = {
            id: thisID,
            area: thisArea
        };
        ytData.push(obj);
    }

    //YouTubeの埋め込み
    function onYouTubeIframeAPIReady() {
      for (var i = 0; i < ytData.length; i++) {
        var player = new YT.Player(ytData[i]['area'], {
          videoId: ytData[i]['id'],
          playerVars: {
            loop: 1,
            playlist: ytData[i]['id'],
            controls: 0, // コントロールバーを非表示に
            autoplay: 1,
            showinfo: 0, // タイトルとシェアボタンを非表示に
            playsinline: 1
          },
          events: {
            "onReady": onPlayerReady
          }
        });
        ytPlayer.push(player); // プレーヤーを配列に追加
      }
    }
  
    function onPlayerReady(event) {
      var player = event.target;
      player.mute();
      player.playVideo();
    }
};