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.?

you are better of using `wmode=opaque` you get better performance, details here: http://stackoverflow.com/q/886864/158014 — Jakub, Nov 08 '11 at 14:52

score 37 · Answer 1 · edited Jun 20 '12 at 13:58

37

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

edited Jun 20 '12 at 13:58

Rob Sobers

20,737
24
82
111

answered Jul 17 '11 at 12:04

Simonini

623
9
25

3

you are better of using `wmode=opaque` you get better performance, details here: http://stackoverflow.com/q/886864/158014 – Jakub Nov 08 '11 at 14:51
The HTML solution works for me. Sadly, the jQuery solution does not. Thanks! – Zade Aug 31 '12 at 06:03
@Zade: This is probably because the url already contains a question mark. – Teetrinker Jan 07 '13 at 11:19
if(url.indexOf("wmode")== -1) $(this).attr("src",url+"?wmode=opaque"); – Mindstorm Interactive Feb 07 '14 at 21:02
also check if any jquery works as CMS's normally set NoConflict = true so you have to set the $ var. jQuery(document).ready(function () { var $ = jQuery; – Mindstorm Interactive Feb 07 '14 at 21:03

score 13 · Answer 2 · edited May 28 '13 at 06:28

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.

score 4 · Answer 3 · edited May 23 '17 at 12:16

4

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:

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

edited May 23 '17 at 12:16

Community

1
1

answered Mar 12 '11 at 08:36

DuckMaestro

15,232
11
67
85

2

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. – cqde Mar 12 '11 at 18:28

score 4 · Answer 4 · answered Sep 06 '11 at 07:50

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!

answered Sep 06 '11 at 07:50

DomingoSL

14,920
24
99
173

5

You added the attribute `wmode="Opaque"` to the `iframe` element. I tried to Google that. I don't think this has any meaning. The query in the url makes sense, but the attribute does not -- if I am mistaken, please correct me. – ido May 14 '13 at 15:09

score 0 · Answer 5 · answered Jan 14 '13 at 00:50

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".............

score 0 · Answer 6 · edited May 28 '13 at 06:27

0

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.

edited May 28 '13 at 06:27

Shadow The GPT Wizard

66,030
26
140
208

answered Feb 06 '12 at 21:25

Calydon

251
1
9

z-index and iFrames!

6 Answers6

Linked