2012-10-03 15 views
6

que tienen un elemento de menú en la parte superior de la página conEmbedded insectos creación de vídeo para la posición: cabecera superior fija

position:fixed; 
z-index:1000; 

y normalmente se mantiene en la parte superior de la página, sin ninguna queja. Sin embargo, cada vez que tengo un video incrustado de YouTube en la página (también debe estar reproduciéndose en ese momento), parece que el menú fijo tiene todo tipo de fallas y saltos. ¿Es esto un problema común, los videos incrustados interfieren con la posición: elementos fijos? El problema está en Chrome, Safari, pero por extraño que parezca, no en Firefox.

¿Este error de consola tiene algo que ver con eso? JavaScript no atractivo intenta acceder al marco con URL ww.youtube ... desde el marco con URL ww.youtube ... Los dominios, protocolos y puertos deben coincidir.

Sé que esta descripción no es muy elaborada, así que aquí está la url: Chronicle Video Section. Estoy haciendo el sitio de periódico escolar de mi escuela secundaria, y estoy perplejo sobre este único tema, nunca antes lo había visto. Intenta desplazarte hacia arriba y hacia abajo mientras se reproduce el video. Gracias por tu ayuda.

El div iframe es in:

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

Si ayuda, como lo tengo configurado es que actualmente extrae el contenido de la entrada del contenido del post wordpress que es simplemente la URL de YouTube y Wordpress convierte la url en una inserción en ese div.

+0

Esta pregunta no se trata de programar sistemas integrados. Reetiquetado –

+0

intenta compartir el css del video o el div que lo contiene también –

Respuesta

2

Esto no es un error de YouTube. Este es un error de webkit relacionado con el redibujado de elementos de posición fija. Recomiendo archivar el error con webkit. http://www.webkit.org/quality/reporting.html

Si desea una solución temporal por ahora, le recomendaría escuchar el evento de desplazamiento de la ventana y cambiar el estilo del menú (ancho, alto o posición) para forzar un redibujado.

+0

Gracias, pensé que me estaba volviendo loco. Lo más probable es que establezca la posición: absoluta a la solución. – austinchan

3

Tuve exactamente el mismo problema y encontré una solución muy simple. Agregue el siguiente parámetro:

?wmode=transparent 

a la URL del video de youtube. Por ejemplo:

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

Más detalles here.

12

He encontrado que la adición de las reglas de estilo

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

al elemento fijo resuelto la locura para mí.

+0

Esto acaba de salvar mi vida. Gracias. – Ennui

+0

Si alguien puede dar una explicación de cómo funciona esta hechicería, estaría bien, pero de lo contrario, esto también me salvó la vida. –

+1

Creo que las gracias están mal visto aquí, pero qué demonios. ¡¡¡GRACIAS!!! – user1457366

Cuestiones relacionadas