Using Youtube's javascript API with jQuery

Question

I\'m currently trying to use the YouTube API as part of a jQuery plugin and I\'ve run into a bit of a problem.

The way the YT api works is that you load the flash pl

Answer 1

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 handler
function 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 functions
function GetMediaControllerFromYouTubeEmbedID(embedID) {      
  var containerID = embedID.replace('YouTubeEmbed', '');
  var containerJQObject = $("#" + containerID);
  return containerJQObject.data('mediaController');      
}

function onYouTubePlayerReady(playerId) {
  var mediaController = GetMediaControllerFromYouTubeEmbedID(playerId);
  mediaController.OnYouTubeAPIReady();
}