jQuery not recognizing <embed> element in IE

Question

I have a CMS where people can paste the code to embed a YouTube video. The problem is, the CMS uses jQuery lightboxes as modal popups to edit things, and the YouTube embeds are appearing over top of the popup window.

I have read in many places that elements don't respect the z-index property and just stick themselves on top of everything. You need to include the "wmode" attribute and set it to "opaque" or "transparent" for them to play along. Also, sometimes you need to include " inside the

I have a simple jQuery function to add the "wmode" attribute to all the "embed" tags on the page, however on IE it simple isn't doing anything. In Firefox the wmode attribute was successfully set on all the elements, but I can see that in IE it isn't being set. However when I edit the text of the embed and add it manually, it works correctly.

$(document).ready(function() {
    $("div.video object").prepend('<param name="wmode" value="transparent">');
    $("div.video embed").attr("wmode", "transparent");              
});

Asking the users to add it manually isn't an option. What's wrong with my jQuery that this isn't working?

Answer 1

I'm not sure how to fix your problem, but can think of two factors you could look in to further:

Setting wmode after the Flash Player, the plugin, is rendered has no effect, it has to be set before the object/embed is rendered, I believe.

Edit: IE doesn't make use of the embed element, only the object element. Apparently, this was wrong, see Ryan's comment.