How can I make iframe respect z-index in IE?
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)
z-index does not work in Internet Explorer with pdf in iframe
Update: Matthew Wise has a really clever alternative solution which you should consider—especially if you're having trouble with my approach or dislike ugly hacks!
There is a way to cover windowed elements in IE with other elements, but you're not going to like it.
Background: windowed and windowless elements
Legacy IE categorises elements into two types: windowed and windowless.
Regular elements like div
and input
are windowless. They are rendered by the browser itself in a single MSHTML plane and respect each other's z-order.
Elements rendered outside of MSHTML are windowed; for example, select
(rendered by the OS) and ActiveX controls. They respect each other's z-order, but occupy a separate MSHTML plane that is painted on top of all windowless elements.
The only exception is iframe
. In IE 5, iframe
was a windowed element. This was changed in IE 5.5; it is now a windowless element, but for backwards compatibility reasons it will still draw over windowed elements with a lower z-index
In other words: iframe
respects z-index for both windowed and windowless elements. If you position an iframe
over a windowed element, any windowless elements positioned over the iframe
will be visible!
What this means
The PDF will always be painted on top of the regular page content—like select
elements were until IE 7. The fix is to position another iframe
between your content and the PDF.
Demo
jsFiddle: http://jsfiddle.net/Jordan/gDuCE/
Code
HTML:
<div id="outer">
<div id="inner">my text that should be on top</div>
<iframe class="cover" src="about:blank"></iframe>
</div>
<iframe id="pdf" src="http://legallo1.free.fr/french/CV_JLG.pdf" width="200" height="200"></iframe>
CSS:
#outer {
position: relative;
left: 150px;
top: 20px;
width: 100px;
z-index: 2;
}
#inner {
background: red;
}
.cover {
border: none;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: -1;
}
#pdf {
position: relative;
z-index: 1;
}
Support
This has been tested and should work in IE 7–9. If you feel persnickety about it showing up in the DOM for other browsers, you can add it with JavaScript or wrap it in an IE-only conditional comment:
<!--[if IE]><iframe class="cover" src="about:blank"></iframe><![endif]-->
iframe in FireFox not respecting z-index
Try adding wmode, it seems to have two parameters.
&wmode=Opaque
&wmode=transparent
<iframe title="YouTube video player" width="480" height="390" src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent" frameborder="0" wmode="Opaque">
For more info
check
YouTube Video Embedded via iframe Ignoring z-index?
Firefox and IE on Win7 not respecting Z-Index on YouTube iFrame
Youtube videos are Flash. Flash has seniority over the Z-order so it is "always" going to overlay.
I had the same issue once and solved it by using wmode
attribute. Try adding ?wmode=opaque
to the URL or &wmode=opaque
if there already is a parameter.
Send iframe to back on IE
Try adding this to your iframe url &wmode=opaque
Alternatively try ?wmode=transparent
Explanation:
http://www.scorchsoft.com/news/youtube-z-index-embed-iframe-fix
Cross-browser absolute positioned div over iframe?
Sometimes Flash doesn't play nice with HTML elements (depending on how you embed it). If you force YouTube's HTML5 player you can work around it:
<iframe src="http://www.youtube.com/embed/dP15zlyra3c?html5=1"></iframe>
Code borrowed from Force HTML5 youtube video
The good old overlapping menu, how to z-index an activeX
ActiveX controls are rendered as "windowed" elements in Internet Explorer, whereas most other elements (particularly in newer versions of IE) are "windowless". Flash has a wmode
option for whether it draws windowless or windowed but, in my experience, this is very difficult to achieve, especially if the object is written in .NET and not C++.
All windowed elements paint themselves on top of all windowless
elements, despite the wishes of their container. However, windowed
elements do follow the z-index attribute with respect to each other,
just as windowless elements follow the z-index attribute with respect
to each other.All windowless elements are rendered on the same MSHTML plane, and
windowed elements draw on a separate MSHTML plane. You can use z-index
to manipulate elements on the same plane but not to mix and match with
elements in different planes. You can rearrange the z-indexing of the
elements on each plane, but the windowed plane always draws on the top
of the windowless plane.
> http://support.microsoft.com/kb/177378
There are two potential solutions I can think of. You could try the iframe "cutout" solution, which explains that you can use iframes to "cut out" part of the plug-in for the HTML below to show through.
The second solution is to draw your popup menus in a popup object. These are separate windows that render in front of your web page and can even exceed the boundaries of the document — with some limitations — the major downside being that they don't have shadows so this might uglify your styling a little.
Z-Index property not working over a youtube video
If you change wmode=opaque
to wmode=transparent
, then the YouTube player should respect your z-index ordering.
EDIT: The problem is you have two ?
characters in your YouTube URL. The wmode=opaque part is not getting through to the server.
It worked for me after I made that change. You probably don't have to set it to transparent
(opaque
should work, too).
<table class="tablestyle0">
<tr>
<td>
<iframe id="ShowFrameID" width="640" height="480"
src="http://www.youtube.com/embed/IxiZ0sdh6hw?wmode=opaque&modestbranding=1&rel=0">
</iframe>
</td>
</tr>
Related Topics
Appbar Overlaps with Other Elements
Can Reactjs Programmatically Handle :Before
Setting an Input Box Background
How to Add Background Colour to Group Layout in Javafx
Putting Image Always in Center Page
How to Center a CSS Drop Down Menu
Grails 2.3 Changes CSS Font-Face Url to "Resource:/..."
CSS 3 Gradients for Styling Svg Elements
Is Opacity Is Inherited in a Div
How to Set a Value of 'Inherit' to a CSS Custom Property
Moodle Not Showing CSS and Theme with Linux Server
Can You Reference Images from CSS Without Using Relative Paths
Disable CSS Stylesheet for a Specific Action in Symfony
Crop an Image to Square Using Percentages and Max Widths
Twitter Bootstrap Remove Table Row Highlight with Row Stripes