Question

I’m trying to do things based on the status that the Youtube API reports back on the currently playing video. The only examples that are on the youtube API page involve embedding the video with swfobject.embedSWF. I’m using something of this form:

<iframe width='640' height='385' src='http://www.youtube.com/embed/"+vid+"?version=3&enablejsapi=1&playerapiid=ytplayer' frameborder='0' type='text/html'></iframe>

I tried doing what they have on the example:

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

function onytplayerStateChange(newState) {
   console.log("Player's new state: " + newState);
}

but I’m not seeing any console output.

Edit: I’m not opposed to using swfobject, but I can’t figure out how to get it to work (I’m pretty new to javascript and jQuery). I tried replacing this:

var video_frame="<iframe width='640' height='385' src='http://www.youtube.com/embed/"+vid+"?version=3&enablejsapi=1&playerapiid=ytplayer' frameborder='0' type='text/html'></iframe>";

with this:

var params = { allowScriptAccess: "always" };
            var atts = { id: "ytplayer" };
            $div = $('<div />').attr('id', "containerplayer");
            swfobject.embedSWF("http://www.youtube.com/v/"+vid+"&enablejsapi=1&playerapiid=ytplayer", "containerplayer", "425", "356", "8", null, null, params, atts);

(and I have onYouTubePlayerReady and Playerstate defined also) but I get an Uncaught Type error.

Answer 1

You probably want to look at playerAPI for iframe embeds (an experimental feature). Otherwise you need to use swfobject (or something similar) to embed the video on the page, which can ultimately trigger the “onYouTubePlayerReady” function.