I have a youtube embedded video that I want to use the YouTube API. 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 fine in Firefox, but not in IE or Chrome at all (not sure about other browsers). So my question is how to change this so that the API works in other browsers? Should I completely remove the object and replace it with SWFObject ?
Note. The embed code is directly linked to YouTube.
Update: I found out if I delete the object, add url parameters, and then add the object back, now I can make it work in Chrome, but still not IE ( updated demo ).
: API- YouTube , / ? SWFObject.
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="640" height="385">
<param name="movie" value="http://www.youtube.com/v/2Qj8PhxSnhg&hl=en_US&fs=1&enablejsapi=1&version=3"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/2Qj8PhxSnhg&hl=en_US&fs=1&enablejsapi=1&version=3" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></embed>
</object>