youtube video causing chrome css fixed background issue

Question

i have a header that is fixed to the top then the content simply is scrolled underneath. So to prevent the content showing through this header i have a background image of the same as the main body and this is fixed.

All works well in everything but in chrome when i scroll the content up and the youtube video then goes underneath this, it causes the header contains background to align left and shrink, then the more you move up it then disappears, which shows the content within the site, which is not the way i want it.

Any ideas on how to prevent this from happening:

some code below:

 header{
   width:960px;
   position: fixed;
   top: 0px;
   margin:0 auto;
   padding:0;
   text-align:center;
   display: block;
   background: url('../imgs/Background_header.jpg') no-repeat top left fixed;
  }

content container css

  .content-container {
   width:960px;
   padding-top:230px;
   z-index:0;
   margin:auto;
   overflow: hidden;
  }

the html:

   <div class="content-container">
    <header>
 <!-- header stuff -->          
    </header>
    <iframe width="560" height="315" src="......
    .. other stuff.

Any ideas would be appreciated thanks, also if there is a better way to produce this then that would eb great as well.

thanks

EDIT: if not clear, the content scrolls underneath the header, and when it reaches the youtube player, this is when the header background image screw up.

score 1 · Answer 1 · edited May 23 '17 at 12:03

This could be solved by adding wmode opaque or transparent to the YouTube URL.

f.ex. to embed this video: http://youtu.be/qgnvbMwRaf8, the iframe you get is

<iframe width="560" height="315" src="//www.youtube.com/embed/qgnvbMwRaf8" frameborder="0" allowfullscreen></iframe>

The first parameter can be added preceded by a question mark. So to add wmode to the URL, you can change the src as followed:

<iframe width="560" height="315" src="//www.youtube.com/embed/qgnvbMwRaf8?wmode=opaque" frameborder="0" allowfullscreen></iframe>

If the URL already has a parameter, you can add a second one, preceded by an ampersand (&), yet best as html (&) f.ex.

<iframe width="560" height="315" src="//www.youtube.com/embed/qgnvbMwRaf8?embedded=true&amp;wmode=opaque" frameborder="0" allowfullscreen></iframe>

note: wmode=opaque and mode=transparent are slower than wmode=window. wmode=transparent is slower than wmode=opaque. - wmode - What does it mean in browser's rendering behavior?

More info on YouTube parameters can be found here.

score 0 · Answer 2 · answered Aug 09 '12 at 18:04

0

Simon, have eu tried placing the iframe with:

position: absolute;
z-index: 9999;

One more note. Z-INDEX only applies to elements with position defined. (Relative, Absolute, and the list goes on).

Hope i can help you.

answered Aug 09 '12 at 18:04

fernandofleury

125
13

thanks for this, but I need the video to go underneath the header, so this is the issue, as it goes underneath the image of the header screws up in chrome. thanks – Simon Davies Aug 10 '12 at 08:29

score 0 · Answer 3 · answered Mar 15 '13 at 08:39

0

Remove "fixed" from the Header background.

try "background: url('../imgs/Background_header.jpg') no-repeat top left;". Don't really know why, but it worked for me.

answered Mar 15 '13 at 08:39

Saulo Padilha

374
3
8

thanks for the mention, i fixed, but will need to go back to the project to see what i did as forgot all about this post. – Simon Davies Mar 15 '13 at 09:40

youtube video causing chrome css fixed background issue

3 Answers3