Enable YouTube API on existing player

Question

I have an embeded youtube video which I want the YouTube API applied. I add the url parameter using jQuery as follows (demo):

$(document).ready(function(){
 var obj = $('object');
 obj.find('embed').attr('src', function(i,s){return s+'&enablejsapi=1&version=3'})
 obj.find('param[name=movie]').attr('value', function(i,v){return v+'&enablejsapi=1&version=3'})

 $('.play').click(function(){
  obj.find('embed')[0].playVideo();
 });
 $('.pause').click(function(){
  obj.find('embed')[0].pauseVideo();
 })
});

This method works great in Firefox, but not at all in IE or Chrome (not sure about other browsers). So my question is how do I modify this to make the API work in other browsers? Would I have to completely remove the object and replace it using SWFObject?

Note: The embed code is directly from YouTube.

---

Update: I figured out if I remove the object, add the url parameters then add the object back, I can now get it to work in Chrome, but still not IE (updated demo).

---

Addendum: Why doesn't the YouTube API function when the object/embed already has the enable code within it? I'm trying to avoid making SWFObject a dependancy.

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="640" height="385">
 <param name="movie" value="http://www.youtube.com/v/2Qj8PhxSnhg&amp;amp;hl=en_US&amp;amp;fs=1&amp;enablejsapi=1&amp;version=3"&gt;&lt;/param&gt;
 <param name="allowFullScreen" value="true"></param>
 <param name="allowscriptaccess" value="always"></param>
 <embed src="http://www.youtube.com/v/2Qj8PhxSnhg&amp;amp;hl=en_US&amp;amp;fs=1&amp;enablejsapi=1&amp;version=3" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></embed>
</object>

Answer 1

Regarding swfobject - yes. IE treats flash embeds slightly differently (thanks activex) than all the other browsers. check out this article to get an idea of why, and the SWFObject documentation for more information.

Also, I recently created a jQuery plugin to help control the embedded player using the player API (basically what you're doing).

Check it out, it's the jQuery TubePlayer plugin - http://www.tikku.com/jquery-youtube-tubeplayer-plugin

Answer 2

IE isn't finding $('object') maybe because you need to specify the right type ( do an alert on the obj length ), but if you do obj = $('embed') it'll work. It might be wise to wrap things around in a different way, that is do $('<div id="test/>') and then append the embed/objects and change the src and movie values.

EDIT: IE doesn't seem to register object until it has a type or clsid attribute specified, eg

EDIT #2: You can probably just inspect the outerHTML of the object element @ http://savedbythegoog.appspot.com/retrieve_cache?unique_id=http://code.google.com/apis/ajax/playground/samples/boilerplateHTML/youtube/chromeless.html|http://code.google.com/apis/ajax/playground/samples/js/youtube/chromeless.js&defaultSample=true