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 <embed> 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 "<param name='wmode' value='transparent'> inside the <object element>
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.
Asking the users to add it manually isn't an option. What's wrong with my jQuery that this isn't working?
$("div.video object").prepend('<param name="wmode" value="transparent">');
$("div.video embed").attr("wmode", "transparent");