JavaScriptのYouTube Player APIで初回アクセス時にYouTube動画をモーダルで自動再生

<div class="popup" id="firstTimeModal">
  <div class="popup-inner">
    <div class="modalCloseButton" id="modalCloseCloss"><span class="lineClose"></span></div>
    <div id="movie2"></div>
  </div>
  <div class="black-background" id="js-black-bg"></div>
</div>

<button id="modalView">モーダルを表示</button>

// YouTube API
  var tag = document.createElement('script');
  tag.src = "//www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  var player;
  function onYouTubeIframeAPIReady() {
    var movieId = 'QdmVFlmbIy8';//youtubeの動画のID。再生したい動画のIDを入力。
    player = new YT.Player('movie2', {
      /*
      playerVarsで細かい設定ができます。
      コメントはどんな設定をしているか書いているだけです。
      */
      playerVars:{
        playsinline: 1,
        autoplay: 1, // 自動再生
        loop: 1, // ループ有効
        listType: 'playlist', //リスト再生（ループ再生に必要）
        playlist: movieId, // 再生する動画リスト（ループ再生に必要）
        controls: 1, // コントロールバー非表示
        enablejsapi: 1, //JavaScript API 有効
        modestbranding:1,//yutubeロゴの非表示
        iv_load_policy: 3, //動画アノテーションを表示しない
        disablekb:1, //キーボード操作OFF
        showinfo:0, //動画の再生が始まる前に動画のタイトルなどの情報を表示しない
        rel:0, //再生終了時に関連動画を表示しない
      },
      videoId:  movieId,
      events: {
        'onReady': onPlayerReady,//動画の準備ができたらonPlayerReadyを実行
        'onStateChange': onPlayerStateChange,
      }
    });
  }
  function onPlayerReady(e) {
    e.target.mute();//音声ミュート
    e.target.playVideo();//動画スタート（SP用）
  }
  function onPlayerStateChange(e){
    if(e.data == 1){
      document.getElementById('cover').style.opacity = 1;//動画の再生が始まったら表示
    }
  }

// 初回モーダル
const keyName = 'viewed';
const keyValue = true;

if (!sessionStorage.getItem(keyName)) {
    sessionStorage.setItem(keyName, keyValue);

    console.log("初回の閲覧");
window.onload = function() {
  var popup = document.getElementById('firstTimeModal');
  if(!popup) return;
  popup.classList.add('is-show');

  var blackBg = document.getElementById('js-black-bg');
  var closeBtn = document.getElementById('modalCloseCloss');
  var ytplayer = document.getElementById('movie2');

  closePopUp(blackBg);
  closePopUp(closeBtn);

  function closePopUp(elem) {
    if(!elem) return;
    elem.addEventListener('click', function() {
      popup.classList.remove('is-show');
      player.pauseVideo(); //一時停止
    })
  }
}
} else {
    console.log("2回目以降の閲覧");
}

document.getElementById('modalView').addEventListener('click', () => {
const modalbtn = document.getElementById('firstTimeModal');
     player.playVideo();
     modalbtn.classList.add('is-show');

  var blackBg = document.getElementById('js-black-bg');
  var closeBtn = document.getElementById('modalCloseCloss');
  var ytplayer = document.getElementById('movie2');

  closePopUp(blackBg);
  closePopUp(closeBtn);

  function closePopUp(elem) {
    if(!elem) return;
    elem.addEventListener('click', function() {
      modalbtn.classList.remove('is-show');
      player.pauseVideo();
    })
  }

});

.popup {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: .6s;
}
.popup.is-show {
  opacity: 1;
  visibility: visible;
}
.popup-inner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 80%;
  max-width: 600px;
  background-color: #000;
  z-index: 2;
  border-radius: 3px;
}
.popup-inner img {
  width: 100%;
  border-radius: 3px 3px 0 0;
}
div#modalCloseCloss:hover {
    opacity: 0.7;
}
.modalCloseButton {
    position: absolute;
    left: 92%;
    top: -48px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    cursor: pointer;
}
.lineClose {
    display: inline-block;
    vertical-align: middle;
    color: #FFF;
    line-height: 1;
    width: 2rem;
    height: 0.2rem;
    background: currentColor;
    border-radius: 0.1rem;
    position: relative;
    transform: rotate(45deg);
}
.lineClose::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  border-radius: inherit;
  transform: rotate(90deg);
}
.black-background {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.6);
  z-index: 1;
  cursor: pointer;
}
.modalBottom {
    padding: 22px 30px;
}
.modalBottom p {
    margin: 0;
}