Embedded Video Erstellen von Bugs in position: fixed obere Kopf

Question

Ich habe ein Menüelement auf dem oberen Rand der Seite mit

position:fixed; 
z-index:1000; 

und es bleibt normalerweise am oberen Rand der Seite, ohne Murren. Allerdings, wenn ich ein Youtube-Video in die Seite eingebettet habe (das muss auch zu der Zeit sein), scheint es, das feste Menü hat alle Arten von Störungen und springt herum. Ist das ein häufiges Problem, eingebettete Videos stören Position: feste Elemente? Das Problem ist in Chrome, Safari, aber seltsamerweise nicht in Firefox.

Hat dieser Konsolenfehler etwas damit zu tun? Unsafe JavaScript versuchen, mit URL ww.youtube ... aus Frame mit URL ww.youtube Frame zugreifen ... Domänen, Protokolle und Ports müssen übereinstimmen.

Ich weiß, dass diese Beschreibung nicht sehr aufwendig ist, also hier ist die URL: Chronicle Video Section. Ich mache die Schulzeitungsseite meiner Highschool, und ich stehe auf dieses eine Thema - das ich noch nie gesehen habe. Scrollen Sie während der Wiedergabe des Videos nach oben und unten. Danke für Ihre Hilfe.

Die div der iframe ist in ist:

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

Wenn es hilft, wie ich es einrichten, dass es zur Zeit den Eintrag Inhalt des Wordpress-Inhalte veröffentlichen, die einfach die URL youtube ist zieht und Wordpress wandelt die URL in eine Einbettung in dieses div um.

Answer 1

Dies ist kein YouTube-Fehler. Dies ist ein Webkit-Fehler, der sich auf das Neuzeichnen von Elementen mit fester Position bezieht. Ich empfehle den Fehler mit Webkit zu archivieren.

Wenn Sie eine Arbeit für jetzt möchten, würde ich empfehlen, das Fenster Scroll-Ereignis zu hören und den Stil des Menüs (Breite, Höhe oder Position) zu ändern, um ein Neuzeichnen zu erzwingen.

Answer 2

Ich hatte genau das gleiche Problem und ich fand eine sehr einfache Lösung. Fügen Sie den folgenden Parameter hinzu:

?wmode=transparent 

an die Youtube-Video-URL. Zum Beispiel:

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

Weitere Details here.

Answer 3

fand ich, dass die Regeln Stil Zugabe

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

zu dem festen Element für mich die Verrücktheit aussortiert.