javascript - Youtube API onYoutubePlayerReady と addEventListener がトリガーされない

Question

Youtube API の onYoutubePlayerReady() & addEventListener("onstatechange"...) 関数が、自分のサイトに YouTube 動画が読み込まれているときにトリガーされない

->このコードは、http://www.vapetropolis.ca/handheld-portable-vaporizersの Web サーバーでホストされています。

->動画が読み込まれるとアラートがポップアップするはずです - onYoutubePlayerReady と addEventListener("onStateChange"...) の両方を介してアラートを実装しようとしましたが、成功しませんでした。

どんな助けでも大歓迎です

これが私がこれまでに持っているものです - このコードはすべて1つの.phtmlファイルにあります:

          <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>

onYoutubePlayerReady にアラートを送信しようとしています...

  <script type="text/javascript">
       function onYouTubePlayerReady(playerId) {
   alert("READY");
}

  </script>

複数のビデオがあります: div は foreach ループで作成されます。このコードの大部分は、読みやすくするために削除されています

<div id="videoDiv-<?php echo $_product->getName();?>"></div>

製品/動画 ID を JavaScript 配列に追加する

<script type="text/javascript">

jQuery(document).ready(function() {
    window.productVideos = {
        //Product Name : Youtube Video Id
    };

    productVideos["Volcano Vaporizer - Classic or Digital"] = "ukHcyEMxBEE";
    productVideos["Iolite Original Vaporizer"] = "WaVSuJ0DH7c";
    productVideos["Iolite Wispr Vaporizer"] = "OTCN-bl10f0";


    var productNames = new Array(
        <?php $count = 0; foreach($_productCollection as $_product ) {
            if ($count > 0) echo ',';
            echo '"' . $_product->getName() . '"';
            $count++;
        }?>
    );

製品配列を反復処理し、関連するビデオをロードします (これは正常に機能します)

    var iterator;
    for (iterator = 0; iterator < <?php echo $_productCollection->count(); ?>; iterator++) {
        if (productVideos[productNames[iterator]]) {
            loadPlayer(productNames[iterator], productVideos[productNames[iterator]]);
        }
    }


});

ビデオにイベント リスナーをアタッチしようとしています - これは機能していません

jQuery(window).load(function() {

    for (var index in window.productVideos) {

        if (document.getElementById("ytPlayer-" + window.productVideos[index])) {
            document.getElementById("ytPlayer-" + window.productVideos[index]).addEventListener("onStateChange", "alert");

        }
    }
});

</script>

さまざまな無関係な機能

<script type="text/javascript">         
                    /**
 * Resizing the player in JavaScript.
 */

function alert() {
    alert("HI");
}


// Make the player small.
function smallPlayer() {
  resizePlayer(480, 295);
}

// Set the player back to normal.
function normalPlayer() {
  resizePlayer(560, 340);
}

// Make the player big.
function largePlayer() {
  resizePlayer(640, 385);
}

function onPlayerStateChange() {
      resizePlayer(560, 340);
}

// Set the loaded player to a specific height and width.
function resizePlayer(width, height, videoID) {
  var playerObj = document.getElementById("ytPlayer-" + videoID);
  jQuery("#yt-player-" + videoID).parents('li').height('600px');
  playerObj.height = height;
  playerObj.width = width;
}

動画をロードする関数 - 上記で呼び出されます

// The "main method" of this sample. Called when someone clicks "Run".
function loadPlayer(productName, videoID) {

  //jQuery("videoDiv-" + productName).parents('li').height('600px');
  // The video to load
  //var videoID = "ylLzyHk54Z0";
  // Lets Flash from another domain call JavaScript
  var params = { allowScriptAccess: "always"};
  // The element id of the Flash embed
  var atts = { id: "ytPlayer-" + videoID, class: "ytplayer"};
  // All of the magic handled by SWFObject (http://code.google.com/p/swfobject/)
  swfobject.embedSWF("http://www.youtube.com/v/" + videoID + 
                     "?version=3&enablejsapi=1&playerapiid=player1", 
                     "videoDiv-" + productName, "140", "85", "9", null, null, params, atts); 
} 
</script>