I'm using the youtube player api. I'm following the doc here:

.html

having a problem adding an event listener on the player, it seems to just get stuck there. I put an alert statement directly after, which never gets called:

ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
alert("I never get called...");

any idea why this would happen? Running it through FF chrome safari, same thing happens on all. Other player features all work fine. I'm using the swfobject version. I'm running this live from a server too. I don't get it.

Thanks

I'm using the youtube player api. I'm following the doc here:

http://code.google./apis/youtube/js_api_reference.html

having a problem adding an event listener on the player, it seems to just get stuck there. I put an alert statement directly after, which never gets called:

ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
alert("I never get called...");

any idea why this would happen? Running it through FF chrome safari, same thing happens on all. Other player features all work fine. I'm using the swfobject version. I'm running this live from a server too. I don't get it.

Thanks

• javascript
• youtube-api

Share Improve this question Follow asked Apr 18, 2010 at 2:45 user246114user246114 51.8k4343 gold badges119119 silver badges153153 bronze badges 1

• I was also facing same problem from many days , I was trying to figure it out . well I realized that the id passed in document.getElement.... should be carefully checked it should be your swfobjects attribute id. var player = document.getElementById(atts.id); – May Commented Oct 20, 2012 at 0:50

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

Place your callback in the global namespace, eg window.onytplayerStateChange = function.

While its pretty crappy its one of the few ways i was able to successfully get the callback to work. I was told its because the addEventListener is a custom function overriding the native code that does a lookup via string in the global namespace.

take a look at the source code of this page, may be it will get you going in the right direction. The number under the video is the state of the video caught and updated the way you are trying to implement

var ytplayer;

function onytplayerStateChange(newState) {
    document.getElementById('videoStatus').innerHTML = newState;
}

function onYouTubePlayerReady(playerId) {
    ytplayer = document.getElementById(playerId);
    ytplayer.addEventListener('onStateChange', 'onytplayerStateChange');
}

$(document).ready(function() {

    var params = {
        allowScriptAccess: "always"
    };

    var atts = {
        id: "ytplayer1"
    };

    swfobject.embedSWF("http://www.youtube./v/5dWnMu490Zk?rel=0&autoplay=1&enablejsapi=1&playerapiid=ytplayer1", "popupVideoContainer1", "853", "505", "9", null, {}, params, atts);

});

<div id="popupVideoContainer1">You need Flash and JavaScript in order to view the video.</div>
<div id="videoStatus">status</div>

I think it's a bug. Here's the solution that worked for me:

In the Player URL, you must include a '&' after the ?. So the example is this:

VIDEO_ID?enablejsapi=1&playerapiid=ytplayer

But use this instead:

VIDEO_ID?&enablejsapi=1&playerapiid=ytplayer

(note the & before 'enable')

Doesn't make much sense, but it's working now :)