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 it's position, that's not it's specific function obviously). This works fine in Firefox, but as usual, it doesn't in IE, here the iframe covers the menu, making it basically unreadable. Is there an option I need to add to the iframe to make it work or is it just plain impossible?
(Testing with IE9 at the moment)
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)
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.
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/
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);
};