jquery - Wordpress で生成され、Ajax 経由で読み込まれた Youtube フレームの制御

Question

すべてのビデオが Wordpress の投稿に含まれ、マーカーに追加される Google マップ インターフェイスを開発しています。インターフェイスには、マップのすぐ上にプリロードされた「4 div コンテナー」も含まれており、マーカーをクリックすると、Jquery Ajax が同じクラスに対応する div 内にビデオをロードします。相対ビデオが終了したときに「div コンテナー」がフェードアウトする必要があります。

JS によって生成されていない複数の iframe を扱っているため、YouTube API ターゲット (複数の) 既存の iframe(s)で RobW によって提案されたソリューションを実装しようとしています。

ただし、奇妙な動作が発生しています。onStateChange が割り当てられた関数は、最初のプレーヤーをロードしたときに機能せず、2 番目のプレーヤーを起動するとフィードバックを返し始めます。

理由はよくわかりませんが、スクリプトの統合方法が間違っている可能性があります。別の .js ファイルに RobW スクリプトの最初の部分をプリロードし、後で次のように Ajax 呼び出し内に YT_ready(function() を設定します。

google.maps.event.addListener(marker, 'click', (function(marker, i) {
          return function() {
            var destinationWin = $('#'+locations[i].meta);
            destinationWin.html("loading...");
            destinationWin.load('?action=ajax_post&id='+ locations[i].addre);

            YT_ready(function() {
    $("iframe[id]").each(function() {
        var identifier = this.id;
        var frameID = getFrameID(identifier);
        if (frameID) { //If the frame exists
            players[frameID] = new YT.Player(frameID, {
                events: {
                    "onStateChange": function(event){
                    if(event.data == 0 ){
                    console.log("ENDED");
                    }
                    }


                }
            });
        }
    });
});
                            }
        })(marker, i));     
    }

}

http://testmap.byethost9.com/にアクセスして、この結果をコンソールで確認できます 。PinkFish は Google マーカーであり、実際には 4 つの赤いフレームの 1 つにビデオをロードします。コメント/ヘルプをいただければ幸いです。