embedded bug video creando per la posizione: intestazione in alto fisso

Question

Ho un elemento di menu nella parte superiore della pagina con

position:fixed; 
z-index:1000; 

e rimane normalmente nella parte superiore della pagina, senza lamentarsi. Tuttavia, ogni volta che ho un video incorporato nella pagina di YouTube (anch'esso deve essere riprodotto in quel momento) a quanto pare, il menu fisso ha tutti i tipi di glitch e saltare in giro. È un problema comune, i video incorporati che interferiscono con la posizione: elementi fissi? Il problema è in Chrome, Safari, ma abbastanza stranamente, non in Firefox.

Questo errore della console ha qualcosa a che fare con questo? Tentativo JavaScript non sicuro di accedere al frame con l'URL ww.youtube ... dal frame con l'URL ww.youtube ... Domini, protocolli e porte devono corrispondere.

So che questa descrizione non è molto elaborata, quindi ecco l'url: Chronicle Video Section. Sto facendo il sito del mio giornale scolastico della scuola superiore e sono perplesso su questo unico problema - non l'ho mai visto prima. Prova a scorrere su e giù mentre il video è in riproduzione. Grazie per l'aiuto.

Il div l'iframe è in è:

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

Se aiuta, come l'ho istituito è che attualmente tira il contenuto ingresso del contenuto del post wordpress che è solo l'URL di YouTube e Wordpress converte l'url in un embed in quel div.

Answer 1

Questo non è un bug di YouTube. Questo è un bug del webkit relativo al ridisegno di posizioni fisse. Raccomando di archiviare il bug con il webkit. http://www.webkit.org/quality/reporting.html

Se si vuole un lavoro in giro per il momento, mi sento di raccomandare l'ascolto della manifestazione finestra di scorrimento e cambiare lo stile del menu (larghezza, altezza, o posizione) per forzare un ridisegno.

Answer 2

Ho avuto esattamente lo stesso problema e ho trovato una soluzione molto semplice. Aggiungere il seguente parametro:

?wmode=transparent 

all'URL di video di youtube. Ad esempio:

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

Maggiori dettagli here.

Answer 3

ho trovato che l'aggiunta delle regole di stile

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

all'elemento fisso risolto la follia per me.