javascript - 1 つのページでの YouTube Player API の複数のインスタンス

Question

私はこれに頭をぶつけて一日を過ごしました。私はいくつかの良い進歩を遂げましたが、この最後の部分で立ち往生しています。

YouTube の API を使用しています。リスナー イベントが構成されており、ビデオが自動再生され、完了時に自動終了します。そのすべてがうまく機能します。

私がやりたいことは、DIV によって割り当てられた 1 つのページ (実際には 5 つ) に複数のビデオを配置することです。このコードでそれを行う方法はありますか?

    // create youtube player
    var player;
    function onYouTubePlayerAPIReady() {
        player = new YT.Player('player', {
          height: '488',
          width: '800',
          videoId: '49QKXdRTX-A',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
    }

    // autoplay video
    function onPlayerReady(event) {
        event.target.playVideo();
    }

    // when video ends
    function onPlayerStateChange(event) {    
if(event.data === 0) {
    $("#player").hide();          
        }    
    }

さらに、これらのビデオのいくつかは、完了時に別の DIV を自動的に表示することに言及する価値があるので、次のようにします。

function onPlayerStateChange(event) {    
if(event.data === 0) {
$("#player").hide();
$("#gallery-main").show();

どんな助けでも大歓迎です。ありがとう！