複数のYouTubeをどのように最適化できますか？

Question

マイページには複数のyoutube playerがあり、ゆっくりとページの読み込みが行われました。 これはHTML↓

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

↓

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

私のコードである12のビデオは、私はそれを最適化することができますどのように、このページにありますか？

Answer 1

12人のプレーヤーを一度に埋め込むことはできません。代わりに、YouTubeムービー（静止画像）のカバー画像を表示し、clickイベントをバインドします。

ユーザーが特定の画像をクリックすると、その画像をDOMから削除し、代わりにプレーヤーを作成します。