Javascript 如何优化多个youtube？

我的页面有几个youtube播放器，这导致页面加载缓慢。 这是我的密码↓

var tag = document.createElement('script');


tag.src = "https://www.youtube.com/player_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  var player;
  function onYouTubePlayerAPIReady() {
    player = new YT.Player('player1', {
      height: '100%',
      width: '100%',
      videoId: 'mCx3oxXBmGA'
    });

player2 = new YT.Player('player2', {
  height: '100%',
  width: '100%',
  videoId: 'SpWR0sSEgMc'
});

HTML↓

<div id="player6"></div>

---

此页面中有12个视频，如何对其进行优化？

不要同时嵌入所有12个播放器。相反，展示一些YouTube电影的封面图片（静态img）并绑定

点击
事件

当用户要单击特定图像时，请将其从DOM中删除，并创建播放机代替它。
使用占位符图像，在单击时加载视频。