Changing Iframe Z- index
JavaScript:
document.getElementById('someID').style.zIndex = -1;
jQuery:
$('someID').css('z-index', -1);
iframe in background with z-index, no menu controls?
You are covering the video with the #iframe, so you can't rollover video to view controls. I just swapped the z index of video to 2 and #iframe to 1. You were just covering video with div by mistake.
iframe {
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#iframe {
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: auto;
}
here is link: https://jsfiddle.net/keinchy/asga90Lg/
IE z-index issue with iframe
I manage to find the answer i had to add to the src of iframe &wmode=opaque
Here is the complete iframe :
<iframe class="video-player" src="//www.youtube.com/embed/7x8BCbo45qA?autoplay=0&showinfo=0&controls=0&wmode=opaque" wmode="Opaque" frameborder="0" allowfullscreen></iframe>
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]-->
Related Topics
Ordered List Showing All Zeros in Ie9
Making Href (Anchor Tag) Request Post Instead of Get
How to Make a Cell of Table Hyperlink
How to Detect Only with CSS Mobile Screens
"Attribute Name Not Allowed on Element Div at This Point"
Question Mark in The Middle of a Url Variable
What Values How to Put in an HTML Attribute Value
Vertically Align Div (No Tables)
How Should a <!Doctype> Section Look in Jsf? HTML5 or Xhtml
Does JSON-Ld Have to Be Embedded
Picture (Source) Element Vs Img Srcset Attribute
How to Select Classes with Spaces
How to Anti-Alias Clip() Edges in HTML5 Canvas Under Chrome Windows
Poor Anti-Aliasing of Text Drawn on Canvas