spec - what is html

z-index y iFrames!

Question

Estoy usando el complemento FancyBox para algunas de las imágenes de mi sitio. En una de mis páginas, también tengo el código incrustado de iFrame de YouTube para colocar un video en la página.

En esta misma página hay una miniatura que, al hacer clic, FancyBoxes la imagen. Sin embargo, el video de YouTube incrustado aún descansa sobre la imagen de FancyBox. Hice un poco de z-index experimentando y todavía sin suerte.

¿Un iFrame tiene antigüedad sobre todos los elementos en una página incluso con conjunto z-index, etc.?

Answer 1

Agregue wmode = transparent como param.

Solución de HTML

<iframe title="YouTube video player" 
width="480" height="390" 
src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent" 
frameborder="0"
>

Solución jQuery:

$(document).ready(function () {
    $(''iframe'').each(function(){
        var url = $(this).attr("src");
        $(this).attr("src",url+"?wmode=transparent");
    });
});

Fuente http://www.scorchsoft.com/news/youtube-z-index-embed-iframe-fix

Answer 2

En una palabra, sí. Sin embargo, los videos de Youtube son Flash. Flash también tiene antigüedad sobre el orden Z. Superpondrá si está en un IFRAME o no.

IFRAME y Flash son objetos "pesados". Tienen sus propios objetos Window Manager (HWND en Windows), por lo que están delante de otros objetos pesados ​​o detrás de ellos.

div , span , etc. son "ligeros". Es decir, son objetos dibujados, dibujados en el cuerpo (que es un objeto pesado), y gestionados por el navegador, no por el administrador de ventanas.

En lo que respecta al administrador de ventanas del sistema operativo, solo son imágenes bonitas dibujadas por el navegador. Es por eso que no pueden superponer objetos "reales" (o lo que el administrador de ventanas piensa que es real).

Deben ser livianos porque agotarían rápidamente el administrador de ventanas si cada DIV y SPAN y A tuvieran que reservar recursos de SO.

Answer 3

Es muy simple, simplemente agrega estos parámetros a tu url iframe y eso es todo:

<iframe title="YouTube video player" width="480" height="390" src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent" frameborder="0" wmode="Opaque">

¡Buena suerte!

Answer 4

Para que esto funcione en IE (al menos 7 y 8) debes agregar esto:

<param name="wmode" value="transparent" />

No creo que exista una forma de agregar esto a la URL del iframe, por lo que su contenido debe tener esto, probablemente entre las etiquetas del objeto.

Answer 5

Si desea que el applet de Flash se represente de acuerdo con las mismas reglas de z-index de cualquier otro elemento HTML, debe configurar el atributo WMODE para el flash incluido.

Ver:

1. http://www.communitymx.com/content/article.cfm?cid=E5141
2. diferencias entre usar wmode = "transparent", "opaque", o "window" para un objeto incrustado en una página web

Answer 6

Hmm, el problema aquí es que no tengo control sobre los elementos flash. Básicamente, simplemente estoy extrayendo el iFrame HTML incrustado del sitio de youtube que solo contiene las etiquetas. Entonces no puedo configurar el atributo WMODE.

Respuesta tardía pero: sí, puedes. Solo vire? Wmode = opaco en la url de yt.

<iframe src="http://www.youtube.com/embed/vRH3Kq5qDw4?wmode=opaque".............