1

In my html page, I have a header and its position is fixed. In the contant or body of the page I have an Iframe to display a youtube video and other DIV tabs. In other browsers like chrome, Morzilla etc all the contants schrolls behind the header and works fine!!.

But In IE (IE 11), only the youtube video in Iframe scrolls over/aboves the header. How can I make it to scroll behind the header in IE.

here is the code

css

#header { position: fixed; background-color: #ffffff; margin-top: -18px; z-index: 10; width: 100%; } iframe { background-color:transparent !important; z-index: -1; }

html (php page)

<div style="text-align:center;padding:20px;font-size:16px ; z-index: -1;">
 <div>
        <iframe  " width="320" height="247" src="http://www.youtube.com/********" frameborder="0" allowfullscreen></iframe>
            </div>
            </div>

http://jsfiddle.net/Rq25Q/

Ram
  • 33
  • 2
  • 8

3 Answers3

2

try adding ?wmode=opaque at the end of src attribute of iframe like <iframe " width="320" height="247" src="http://www.youtube.com/abcd?wmode=opaque" frameborder="0" allowfullscreen></iframe>

Rohit
  • 61
  • 5
  • Also see here: https://helpx.adobe.com/flash/kb/flash-object-embed-tag-attributes.html referenced from here: http://stackoverflow.com/questions/886864/differences-between-using-wmode-transparent-opaque-or-window-for-an-embe – Patrick R. Aug 31 '15 at 17:06
1

I trying to reproduce what you want, but I can't find any error in IE 11.

.header {
  position: fixed;
}

Here is a jsfiddle for this: http://jsfiddle.net/nJBy9/

All the contents scrolls behind the header and works well.

Can you explain what is your problem?

xxxbence
  • 2,240
  • 1
  • 22
  • 14
  • Hello, thanks i tried yours, its works fine if src is some website link.. please try this in IE 11 [http://jsfiddle.net/Rq25Q/](http://jsfiddle.net/Rq25Q/) i have the same problem and not yet fixed – Ram Jun 16 '14 at 10:14
0

You need to ensure that the z-index of the iframe is less than the z-index of the header:

.header {
   z-index: 10;
} 
iframe {
  z-index: 1
}
Kevin Lynch
  • 24,427
  • 3
  • 36
  • 37
  • Hey, I tried this it works well with some Div. but i have the same problem with youtube video in Iframe please check this in IE 11 [http://jsfiddle.net/Rq25Q/](http://jsfiddle.net/Rq25Q/) – Ram Jun 16 '14 at 10:18