어떻게 여러 YouTube를 최적화 할 수 있습니까?

Question

내 페이지에 여러 개의 유튜브 플레이어가있어 페이지 로딩 속도가 느립니다. 이 내가 그것을 최적화 할 수있는 방법이 페이지에서 12 비디오가 있습니다 ↓

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> 

내 코드?

Answer 1

한 번에 12 명의 플레이어를 모두 포함시키지 마십시오. 대신 YouTube 영화 (정적 이미지)의 표지 이미지를 제시하고 click 이벤트를 바인딩하십시오.

사용자가 특정 이미지를 클릭하면 DOM에서 이미지를 제거하고 대신 이미지 플레이어를 만듭니다.