Using Youtube's javascript API with jQuery

Edit:

Apparently calling addEventListener on the player object causes the script to be used as a string in an XML property that's passed to the flash object - this rules out closures and the like, so it's time for an old-school ugly hack:

function onYouTubePlayerReady(playerId) {    var player = $('#'+playerId)[0];    player.addEventListener('onStateChange', '(function(state) { return playerState(state, "' + playerId + '"); })' );}function playerState(state, playerId) {    console.log(state);    console.log(playerId);}

Tested & working!

Im Using Jquery SWFobject plugin, SWFobject

It is important to add &enablejsapi=1 at the end of video

HTML:

<div id="embedSWF"></div>

Jquery:

             $('#embedSWF').flash({                 swf: 'http://www.youtube.com/watch/v/siBoLc9vxac',                params: { allowScriptAccess: "always"},                   flashvars: {enablejsapi: '1', autoplay: '0', allowScriptAccess: "always", id: 'ytPlayer' },                   height: 450,   width: 385 });function onYouTubePlayerReady(playerId) {                $('#embedSWF').flash(function(){this.addEventListener("onStateChange", "onPlayerStateChange")});            }function onPlayerStateChange(newState) {                   alert(newState);                 }

onYouTubePlayerReady must be outside of $(document).ready(function() to get fired

I had this same problem and tried the accepted answer. This didn't work for me; the playerState() function was never called. However, it put me on the right path. What I ended up doing was this:

// Within my mediaController "class"window["dynamicYouTubeEventHandler" + playerID] = function(state) { onYouTubePlayerStateChange(state, playerID); }  embedElement.addEventListener("onStateChange", "dynamicYouTubeEventHandler" + playerID);// End mediaController class// Global YouTube event handlerfunction onYouTubePlayerStateChange(state, playerID) {  var mediaController = GetMediaControllerFromYouTubeEmbedID(playerID);  mediaController.OnYouTubePlayerStateChange(state);}

It's fairly nasty, but so is the current state of the YouTube JavaScript API.

Here is some other helpful/nasty code if you are using any kind of advanced prototyping patterns. This basically allows you to retrieve a "class" instance from the YouTube player ID:

// Within my mediaController "class"// The containerJQElement is the jQuery wrapped parent element of the player ID// Its ID is the same as the player ID minus "YouTubeEmbed".var _self = this;containerJQElement.data('mediaController', _self);// End mediaController class// Global YouTube specific functionsfunction GetMediaControllerFromYouTubeEmbedID(embedID) {        var containerID = embedID.replace('YouTubeEmbed', '');  var containerJQObject = $("#" + containerID);  return containerJQObject.data('mediaController');      }function onYouTubePlayerReady(playerId) {  var mediaController = GetMediaControllerFromYouTubeEmbedID(playerId);  mediaController.OnYouTubeAPIReady();}