YouTube API, jQuery attr won't swap element attributes

Question

JavaScript (jQuery)

function display_youtube(new_url) {
    $('#movie_url').removeAttr('value');
    $('#embed_url').removeAttr('src');
    $(document).ready(function() {
        $('#movie_url').attr('value', new_url);
        $('#embed_url').attr('src', new_url);
        $('#shade').css('display', 'block');
        $('#youtube_player').css('display', 'block');
        $('#exit_youtube').css('display', 'block');
    });
}

HTML

<object width="720" height="480">
<param id="movie_url" name="movie" value="http://www.youtube.com/v/_eaToCSn7yU?f=user_uploads&app=youtube_gdata&autoplay=0" />
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<embed id="embed_url" src="http://www.youtube.com/v/_eaToCSn7yU?f=user_uploads&app=youtube_gdata&autoplay=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="720" height="480" />
</object>

Hyperlink

<a href="javascript:display_youtube('http://www.youtube.com/v/_eaToCSn7yU?f=user_uploads&app=youtube_gdata&autoplay=1');">Click Here for Fun!</a>

What I've done is parsed YouTube's API for the videos on my user channel.

The hyperlink above is php generated, meant to trigger the above JavaScript function, and swap the url from attributes contained in ids "movie_url" and "embed_url" works just like it should in FF, but IE it will only perform the .css commands.

My guess is that IE doesn't like me assigning IDs to PARAM and EMBED.

Answer 1

Fixed it! My new code is listed below. The issue was IE's handling of Flash parameters (wouldn't perform an async refresh of the params for the object). It was working fine in FF because it was embedding the video, and not handling it as an object.

New Javascript

function display_youtube(new_url) {
    $('#object_url').replaceWith('<param id="object_url" name="movie" value="' +new_url+ '" />');
    $('#embed_url').replaceWith('<embed id="embed_url" src="' +new_url+ '" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="720" height="480" />');
    $('#shade').css('display', 'block');
    $('#youtube_player').css('display', 'block');
    $('#exit_youtube').css('display', 'block');
}
function exit_youtube() {
    $('#object_url').replaceWith('<param id="object_url" />');
    $('#embed_url').replaceWith('<embed id="embed_url" />');
    $('#shade').css('display', 'none');
    $('#youtube_player').css('display', 'none');
    $('#exit_youtube').css('display', 'none');
}

New HTML

<object width="720" height="480">
    <param id="object_url" />
    <param name="allowFullScreen" value="true" />
    <param name="allowscriptaccess" value="always" />
    <embed id="embed_url" />
</object>

I think the trick here was to force IE to rely on instructions from jQuery before it could perform any actions whatsoever on the object, in effect preventing IE from caching any parameters from the start. FTW!