How can I make iframe respect z-index in IE?

Question

I have a youtube iframe element in my website, but it\'s next to my menu items. When I hover over a menu item, a submenu opens that partially covers the iframe (because of i

Answer 1

I saw the similar issue, the default youtube link word should be embed,

<iframe src="http://www.youtube.com/embed/video_id"></iframe>

but not just v-link (v-link ignores z-index):

<iframe src="http://www.youtube.com/v/video_id" frameborder="0"></iframe>

Here is an example for IE: http://jsfiddle.net/7fd8Y/21/

Answer 2

There are several issues with this question. First of all, there is no problem in IE to set an iframe above or below other content in your document using z-index. Higher z-index makes your iframe above other elements, (as usual), as far as your iframe is positioned: relative, absolute or fixed.

The real problem comes when the content of your iframe is a flash embedded object. In this case, the flash object can only be z-positioned if its wmode parameter is set to "transparent" or "opaque", but it will not work if the flash is included in the HTML document using wmode = "window".

So if you are including an external resource (in a website you don't have access, like youtube), you can only achieve it if any of those modes are used. If you are loading a flash object in a iframe in which you can modify its content, just check that:

<param name="wmode" value="transparent" />

is set.

In case youtube is using "window" mode, you can always use your own flash player and hook youtube videos dynamically, setting your flash object mode to transparent.

Answer 3

Try using Youtubes iframe embed method (if thats not what you are already doing, and add: ?wmode=transparent to the url (replace ? with & if it is not the first url variable)

Answer 4

Here is a non pure JS solution, alternative to JQuery:

var iFramesOnPage = document.getElementsByTagName("IFRAME");
for(var i = 0; i < iFramesOnPage.length; i++) { 
    var newiFrameURL = iFramesOnPage[i].getAttribute("src")+"?wmode=transparent"; 
    iFramesOnPage[i].setAttribute("src", newiFrameURL);
};