2011-11-26 14 views
19

Tengo un elemento ifraube de youtube en mi sitio web, pero está al lado de mis elementos de menú. Cuando cierro sobre un elemento del menú, se abre un submenú que cubre parcialmente el iframe (debido a su posición, obviamente no es su función específica). Esto funciona bien en Firefox, pero como es habitual, no ocurre en IE, aquí el iframe cubre el menú, por lo que es básicamente ilegible. ¿Hay alguna opción que necesite agregar al iframe para que funcione o es simplemente imposible?¿Cómo puedo hacer que iframe respete z-index en IE?

(Pruebas con IE9 en el momento)

+0

Intente utilizar http://www.youtube.com/embed/ El enlace de video_id pero no http://www.youtube.com/v/video_id ese fue el problema en mi caso. Se debe usar incrustado, pero no V. – Spirit

Respuesta

46

Trate de usar el método de marco flotante embed Youtubes (si eso no es lo que están haciendo ya, y añade: wmode = transparente a la url (sustituir con & si no es la primera variable url)

+6

Funcionó, ¡hurra! – Valyrion

+2

FYI , el iframe (o un div que lo contiene) necesita un 'z-index' explícito para que esto funcione. – joescii

+0

Agregando wmode = transparent funcionó genial, ¡muchas gracias! – Migs

27

Hay varios problemas con esta pregunta. En primer lugar, no hay ningún problema en IE para establecer un iframe por encima o por debajo de otro contenido en su documento usando z-index. Un índice Z más alto hace que su iframe esté por encima de otros elementos, (como siempre), en la medida en que su iframe está posicionado: relativo, absoluto o fijo.

El verdadero problema surge cuando el contenido de su iframe es un objeto flash incrustado. En este caso, el objeto flash solo se puede colocar z si su parámetro wmode se establece en "transparente" u "opaco", pero no funcionará si el flash está incluido en el documento HTML usando wmode = "ventana".

Por lo tanto, si incluye un recurso externo (en un sitio web al que no tiene acceso, como youtube), solo puede lograrlo si se utiliza alguno de esos modos. Si va a cargar un objeto flash en un marco flotante en el que puede modificar su contenido, simplemente comprobar que:

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

se establece.

En caso de que youtube esté usando el modo "ventana", siempre puede usar su propio reproductor de flash y enganchar videos de youtube dinámicamente, configurando el modo de objeto de flash en transparente.

+7

+1 para explicar cuál era el problema real – Valyrion

+0

¿Puede ayudarme proporcionando una respuesta para iframe con pdf? (Estoy usando Foxit Reader) :( –

0

I?? vio el problema similar, la palabra youtube enlace por defecto debería ser incrustar,

<iframe src="http://www.youtube.com/embed/video_id"></iframe> 

pero no sólo v-LINK (v-LINK ignora índice z):

<iframe src="http://www.youtube.com/v/video_id" frameborder="0"></iframe> 

Aquí se muestra un ejemplo para IE: http://jsfiddle.net/7fd8Y/21/

0

Aquí es una solución no pura JS, alternativa a jQuery:

var iFramesOnPage = document.getElementsByTagName("IFRAME"); 
for(var i = 0; i < iFramesOnPage.length; i++) { 
    var newiFrameURL = iFramesOnPage[i].getAttribute("src")+"?wmode=transparent"; 
    iFramesOnPage[i].setAttribute("src", newiFrameURL); 
}; 
Cuestiones relacionadas