YouTube Embeddable Player: change video link using javascript dynamically

Question

Here is part of my html code (videos marked with django-template language variables):

<div class="mainPlayer"> <object width="580" height="326"> <param name="movie" value="{{main_video.video_url}}"></param> <param name="allowFullScreen" value="true"></param> <param name="allowscriptaccess" value="always"></param> <embed src="{{main_video.video_url}}" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="580" height="326"></embed> </object> </div> 

and JS code (using jQuery 1.4.x)

 $(document).ready(function(){ ..... $(".activeMovie img").live("click", function(){ video_url = ($(this).parent().find('input').val()); $('.mainPlayer').find('param:eq(0)').val(video_url); $('.mainPlayer').find('embed').attr('src', video_url); }) ... }) 

Such an algorithm works fine in ff 3.6.3, but no luck in chrome4 or opera 10.x., src and value does not change, but the youtube player still shows the old video.

Answer 1

Try to hide / show the tag.

 $('div.mainPlayer object').hide().show(); 

This reloads the entire Flash movie in most browsers.

Answer 2

Instead of using direct YouTube code, I would use swfobject for cross-platform implementation of Flash. Therefore, if you have a video located in this tag:

 <div id='myvideo'></div> 

To enable a YouTube video, you do the following:

swfobject.embedSWF (<>, "myvideo", "580", "326", "9.0.0");

To change the video do it in javascript:

 swfobject.removeSWF("myvideo"); swfobject.embedSWF(<<new video url>>, "myvideo", "580", "326", "9.0.0"); 

swfobject (which is located in google code) takes care of all the problems of implementing Flash cross-linking.

Alternatively you can use

Answer 3

I think you should use window.load , not ready :

 $(window).load(function(){ // ....... }