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.

Answer 1

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.