youtube embeded player: change video link with javascript, dinamically

Question

here is a part of html code (video urls marked with a 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 a algorithm works fine in ff 3.6.3, but any luck in chrome4 or opera 10.x., src and value are changed, but youtube player still shows an old video.

Answer 1

I think you should use window.load rather than ready:

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

Answer 2

Try hiding/showing the tag.

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

This restarts the whole Flash movie in most browsers.

Answer 3

Instead of using the straight YouTube code, I would use swfobject for cross platform flash embedding. So if you have a video located within this tag:

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

To embed your YouTube video, you do the following:

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

To change the video, you do this in javascript:

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

swfobject (which is hosted on google code) takes care of all the cross-plaform flash embedding issues.

Alternatively, you can use the YouTube JavaScript API to change your video on the fly.