z-index and iFrames!

Question

I'm using the FancyBox plugin for some of my site's images. On one of my pages, I also have the embedded iFrame code from YouTube to place a video on the page.

On this same page is a thumbnail that, when clicked, FancyBoxes the image. However, the embedded YouTube video still lays over the FancyBox image. I did a bit of z-index experimenting and still no luck.

Does an iFrame have seniority over all elements in a page even with z-index set, etc.?

Answer 1

Add wmode=transparent as param.

Html solution

<iframe title="YouTube video player" 
width="480" height="390" 
src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent" 
frameborder="0"
>

jQuery solution:

$(document).ready(function () {
    $('iframe').each(function(){
        var url = $(this).attr("src");
        $(this).attr("src",url+"?wmode=transparent");
    });
});

Source http://www.scorchsoft.com/news/youtube-z-index-embed-iframe-fix

Answer 2

In a word, yes. However Youtube videos are Flash. Flash also has seniority over the Z-order. It will overlay whether it is in an IFRAME or not.

IFRAME and Flash are "heavyweight" objects. They have their own Window Manager objects (HWND in Windows), so they are either in front of other heavyweight objects or behind them.

div, span, etc are "lightweight". That is they are drawn objects, drawn onto the Body (which is a heavyweight object), and managed by the browser, not the window manager.

As far as the operating system window manager is concerned, they are just pretty pictures drawn by the browser. That's why they cannot overlay "real" objects (or what the window manager thinks of as real).

They have to be lightweight because they would rapidly exhaust the window manager if every DIV and SPAN and A had to reserve OS resources.

Answer 3

If you want the Flash applet to be rendered according to the same z-index rules of any other HTML element, then you need to set the WMODE attribute for the included flash.

See:

1. http://www.communitymx.com/content/article.cfm?cid=E5141
2. differences between using wmode="transparent", "opaque", or "window" for an embedded object on a webpage

Answer 4

Is very simple, just add this parameters to your iframe url and thats it:

<iframe title="YouTube video player" width="480" height="390" src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent" frameborder="0" wmode="Opaque">

Good luck!

Answer 5

Hmm, the problem here is that I don't have control over the flash elements. I'm basically just pulling the embedded iFrame HTML from the youtube site which only contains the tags. So I can't set the WMODE attribute.

Late answer but: yes you can. Just tack ?wmode=opaque onto the yt url.

<iframe src="http://www.youtube.com/embed/vRH3Kq5qDw4?wmode=opaque".............

Answer 6

To get this to work in IE (at least 7 and 8) you must add this:

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

I don't believe there is a way to append this to the iframe URL so your content needs to have this, probably between object tags.