I have embedded youtube video in my site using iframe tag. I also having some fixed navigation in my site. While scrolling the page on IE iframe youtube videos are overlapping the fixed navigation which is having more z-index.
I have tried the below method :
Method 1: Applied absolute position for both iframe and navigation and increased z-index for navigation.
Method 2: Used a parameter wmode=opaque along with the URL.
Method 3: Used a parameter wmode=transparent along with the URL.
Method 4: Used a parameter wmode=transparent along with the URL and added an attribute wmode="Opaque".
After trying with all these four method , this is not working.
Note: It was working earlier(1year back) while using wmode=opaque, but now it's not.
-> My Code:
HTML
<div class="navbar"> Sticky Navigation</div>
<div class="iframe_1">
<iframe width="492" height="277" src="https://www.youtube.com/embed/JGZ7KRjcXzQ?wmode=opaque" frameborder="0" allowfullscreen></iframe>
</div>
<div class="iframe_2">
<iframe width="492" height="277" src="https://www.youtube.com/embed/JGZ7KRjcXzQ?wmode=transparent" frameborder="0" allowfullscreen></iframe>
</div>
<div class="iframe_3">
<iframe width="492" height="277" src="https://www.youtube.com/embed/JGZ7KRjcXzQ?wmode=transparent" frameborder="0" wmode="Opaque" allowfullscreen></iframe>
</div>
<div class="iframe_4">
<iframe width="492" height="277" src="https://www.youtube.com/embed/JGZ7KRjcXzQ" frameborder="0" allowfullscreen></iframe>
</div>
<div class="footer_nav">Navigation Footer</div>
CSS
.navbar{
position:fixed; width:100%; height:50px; background:#EFEFEF; top:0; left:0; z-index:10; text-align:center; font-weight:bold; padding:10px 0;
}
.iframe_1, .iframe_2, .iframe_3, .iframe_4{
width: 100%;
height: auto;
border-bottom: 4px solid #ccc;
padding-bottom: 10px;
margin-bottom: 20px;
}
.footer_nav{
width: 100%; height: 200px;background: #000;
}
Sreenshot
Demo URL with sample code : Click here
