Menu
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.?
776
To get around this we use the z-index property of CSS. This property only works on elements that have been positioned, as we have done with each IFrame, in that it has been placed within an absolutely positioned HTML div element. Z-index facilitates the display order (or 'stack' order) of elements on a page.
IFrames are not obsolete, but the reasons for using them are rare. Using IFrames to serve your own content creates a "wall" around accessing the content in that area. For crawlers like Google, It's not immediately clear that cotent in an iframe will be ranked as highly as if the content were simply part of the page.
The div can be overlayed over iframe using z-index and absolute positioning. Iframe should have z-index lower than the div having class as overlay. Style the overlay div to the same height and width as the iframe, so that it does not affect the functionality of any other divs.
Note: z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky) and flex items (elements that are direct children of display:flex elements).
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
121
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.
31
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:
24
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
