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'
});

HTML↓

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

此页面中有12个视频，我该如何优化它？

Answer 1

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

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

如何优化多个YouTube？

1 个答案: