Link to home
Start Free TrialLog in
Avatar of ryangiglio
ryangiglio

asked on

jQuery not recognizing <embed> element in IE

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

Avatar of Michel Plungjan
Michel Plungjan
Flag of Denmark image

Prepend?

Sounds like you would get
<param><object>

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

ASKER

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
ASKER CERTIFIED SOLUTION
Avatar of Michel Plungjan
Michel Plungjan
Flag of Denmark image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial