JavaScriptのYouTube Player APIで複数のサムネイル付き動画の設置

<ul class="ytList">
<li>
  <div id="ytVideo1" class="loadBefore"></div>
</li>
<li>
  <div id="ytVideo2" class="loadBefore"></div>
</li>
<li>
  <div id="ytVideo3" class="loadBefore"></div>
</li>
<li>
  <div id="ytVideo4" class="loadBefore"></div>
</li>
</ul>

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 youtubeData = [
  {
    youtubeIid: 'HtnGqgW_Hig',
    embedArea: 'ytVideo1'
  }, {
    youtubeIid: '-RYtwwaBVB8',
    embedArea: 'ytVideo2'
  }, {
    youtubeIid: 'HxTQF1bCyag',
    embedArea: 'ytVideo3'
  }, {
    youtubeIid: 'k5eNRgAhHqk',
    embedArea: 'ytVideo4'
  }
];
 
function onYouTubeIframeAPIReady() {
  for (var i = 0; i < youtubeData.length; i++) {
    document.getElementById(youtubeData[i]['embedArea']).innerHTML = '<img id="yt-thumb' + i + '" src="http://i.ytimg.com/vi/' + youtubeData[i]['youtubeIid'] + '/sddefault.jpg">';
    embedYoutube(i);
  }
}
 
// YouTubeの埋め込みの準備
var ytPlayer;
function embedYoutube(num) {
  // サムネイルクリックでYouTubeを埋め込むようにする
  document.getElementById('yt-thumb' + num).addEventListener('click', function() {
    ytPlayer = new YT.Player(
      youtubeData[num]['embedArea'], // 埋め込む場所の指定
      {
        width: 400, // プレーヤーの幅
        height: 280, // プレーヤーの高さ
        videoId: youtubeData[num]['youtubeIid'], // YouTubeのID
        events: {
            'onReady': onPlayerReady
        }
      }
    );
  });
}
 
function onPlayerReady(event) {
  event.target.mute();
  event.target.playVideo();
}

ul.ytList {
    display: flex;
    justify-content: space-between;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
    gap: 20px;
    border: none;
}
ul.ytList li {
    width: calc(100% / 2 - 20px);
    padding: 0;
    background: #000;
}
ul.ytList li .loadBefore {
    position: relative;
}
ul.ytList li .loadBefore:before {
    content: "\f144";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 3.1em;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.4;
    pointer-events: none;
}
ul.ytList li .loadBefore:hover:before {
    opacity: 1;
    color: #D80C18;
}

ul.ytList li img {
    cursor: pointer;
    height: 280px;
    object-fit: cover;
}