Embedded Video creating bugs for position:fixed top header

Question

I have a menu element on the top of the page with

position:fixed;
z-index:1000;

and it normally stays at the top of the page, without any complaining. However, whenever I have a youtube embedded video in the page (also must be playing at the time) it seems, the fixed menu has all sorts of glitches and jumping around. Is this a common issue, embedded videos interfering with position:fixed elements? The issue is in Chrome, Safari, but oddly enough, not in Firefox.

Does this console error have anything to do with it? Unsafe JavaScript attempt to access frame with URL ww.youtube... from frame with URL ww.youtube... Domains, protocols and ports must match.

I know this description is not very elaborate, so here is the url: Chronicle Video Section. I'm making my high school's school newspaper site, and I'm stumped on this one issue - never seen it before. Try scrolling up and down while the video is playing. Thanks for your help.

The div the iframe is in is:

<div class="entry-content">
    <p>
        <iframe... />
    </p>
</div>

If it helps, how I have it set up is that it currently pulls the entry content of the wordpress post content which is just the youtube url and Wordpress converts the url into an embed into that div.

Toomin

This question is not about programming embedded systems. Retagged. – Immix

try to share the css of the video or the div containing it also – Cony

Answer 1

This isn't a YouTube bug. This is a webkit bug related to redrawing of fixed position items. I recommending filing the bug with webkit. http://www.webkit.org/quality/reporting.html

If you want a work around for now, I would recommend listening to the window scroll event and changing the style of the menu(width, height, or position) to force a redraw.

Sellma

Thank you, I thought I was going crazy. Will most likely set position: absolute to workaround. – Toomin

Answer 2

I found that adding the style rules

-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0);

to the fixed element sorted out the craziness for me.

Shakitashako

If anyone can provide explanation for how this sorcery works, that'd be nice, but otherwise this just saved my life too. – Tameika

This was great, thank you! Any idea why it worked in IE and FF but not Chrome? – Kirschner

Answer 3

I had exactly the same problem and I found a very simple solution. Add the following parameter:

?wmode=transparent

to the youtube video url. For example:

<iframe width="560" height="315" src="http://www.youtube.com/embed/brg1H4BuII8?wmode=transparent&rel=0" frameborder="0" allowfullscreen></iframe>

More details here.

Tympanum

Answer 4

This is building on @gregdev's answer:

backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;  
transform: translateZ(0);
-moz-transform: translateZ(0);
-webkit-transform: translateZ(0);

For complete browser support.

Whitten