如何优化多个优酷

Question

我的页面有几个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'
});

目录↓

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

此页面共有 12 个视频，如何优化？

Answer 1

不要一次嵌入所有 12 个玩家。而是呈现YouTube电影的一些封面图像(静态图像(并在其上绑定click事件。

当用户单击特定图像时，请将其从 DOM 中删除并创建播放器而不是它。