We help IT Professionals succeed at work.

jQuery not recognizing <embed> element in IE

ryangiglio
ryangiglio used Ask the Experts™
on
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?
$(document).ready(function() {
$("div.video object").prepend('<param name="wmode" value="transparent">');
$("div.video embed").attr("wmode", "transparent");				
});

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Michel PlungjanIT Expert
Top Expert 2009

Commented:
Prepend?

Sounds like you would get
<param><object>

Why are you not creating the complete object string at once?

Author

Commented:
prepend puts the <param> as its first child. I know it sounds odd but that's what it does. http://api.jquery.com/prepend/

Users are going to be copying the embed codes from YouTube, which look like this:

<object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/IzFfNk4xGTE&hl=en_US&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/IzFfNk4xGTE&hl=en_US&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object>

I need to add the param of wmode = transparent to that code they are pasting
IT Expert
Top Expert 2009
Commented:
so do a string replace before the object is part of the DOM