Video de YouTube incrustado a través de iframe ¿Ignorando z-index?

Estoy tratando de implementar un menú de navegación desplegable multinivel horizontal. Inmediatamente debajo (verticalmente) del menú, tengo un video de YouTube incrustado a través de iframe. Si coloco el cursor sobre uno de los elementos de navegación de nivel principal en Firefox, el menú desplegable aparece correctamente en la parte superior del video.

En Chrome e IE9, sin embargo, solo una pequeña parte del menú desplegable es visible en la pequeña región de espacio que tengo entre el menú y el iframe. El rest parece estar detrás del iframe.

El problema parece estar relacionado con el video de YouTube, no con el iframe. Para probar, apunté el iframe a otro sitio web en lugar del video, y el menú desplegable funcionó bien, incluso en IE.

  • Pregunta 1: ¿WTF?
  • Pregunta 2: ¿Por qué, incluso si explícitamente pongo un z-index:-999 !important; en el iframe, ¿este problema aún ocurre?

¿Hay algún CSS interno que incluya el código de inserción de YouTube que de alguna manera está anulando las cosas?

Intenta agregar wmode, parece tener dos parámetros.

 &wmode=Opaque &wmode=transparent 

No puedo encontrar una razón técnica por la que funciona, o mucha más explicación, pero mire esta consulta .

  

o esto

 //Fix z-index youtube video embedding $(document).ready(function (){ $('iframe').each(function(){ var url = $(this).attr("src"); $(this).attr("src",url+"?wmode=transparent"); }); }); 

La respuesta de Joshc estaba en el camino correcto, pero descubrí que elimina por completo la cadena de búsqueda?rel=0 y la reemplaza con el elemento ?wmode=transparent , que tiene el efecto de mostrar la lista de videos sugeridos de YouTube al final del reproducción, aunque originalmente no quería que esto sucediera.

Cambié el código para que el atributo src del video incrustado se escanee primero, para ver si hay un signo de interrogación ? en él ya (porque esto denota la presencia de una cadena de consulta preexistente, que podría ser algo así como ?rel=0 pero en teoría podría ser cualquier cosa que YouTube elija agregar en el futuro). Si ya hay una cadena de consulta allí, queremos preservarla, no destruirla, porque representa una configuración elegida por quien pegó en este video de YouTube, ¡y presumiblemente la eligieron por alguna razón!

Entonces, si ? se encuentra, wmode=transparent se agregará utilizando el formato: &mode=transparent para etiquetarlo al final de la cadena de consulta preexistente.

Si no ? se encuentra, entonces el código funcionará exactamente de la misma manera que originalmente (en la publicación de toomanyairmiles ), añadiendo solo ?wmode=transparent como una nueva cadena de consulta a la URL.

Ahora, independientemente de lo que puede o no estar al final de la URL de YouTube como una cadena de consulta, se conserva y los parámetros wmode necesarios se inyectan o agregan sin dañar lo que había antes.

Aquí está el código para colocar en su función document.ready :

 $('iframe').each(function() { var url = $(this).attr("src"); if (url.indexOf("?") > 0) { $(this).attr({ "src" : url + "&wmode=transparent", "wmode" : "opaque" }); } else { $(this).attr({ "src" : url + "?wmode=transparent", "wmode" : "opaque" }); } }); 

Simplemente agregue uno de estos dos a la url de src:

 &wmode=Opaque &wmode=transparent  

Tengo el mismo problema en YouTube aunque iframe solo se incorpora en Internet Explorer.

Z-index estaba siendo ignorado por completo, o el video flash solo aparecía en el índice más alto posible.

Esto fue lo que usé, ligeramente adaptando el guión jquery anterior.

Mi código de inserción, directamente desde YouTube …

  

El jQuery ligeramente adaptado de la respuesta anterior …

 $('iframe').each( function() { var url = $(this).attr("src") $(this).attr({ "src" : url.replace('?rel=0', '')+"?wmode=transparent", "wmode" : "Opaque" }) }); 

Básicamente, si no selecciona Mostrar videos sugeridos cuando el video finaliza en su configuración de inserción, tiene un ?rel=0 al final de su url "src" . Así que agregué el bit de reemplazo en caso de que exista ?rel=0 . De lo contrario, ?wmode=transparent no funcionará.

Simplemente podemos agregar ?wmode=transparent al final de la URL de YouTube. Esto le indicará a YouTube que incluya el video con el conjunto de wmode. Entonces, su nuevo código de inserción se verá así:

  

Solo este me funcionó:

  

Lo cargo en el archivo footer.php WordPress. Código encontrado en comentario aquí (gracias Gerson)

wmode = opaco o transparente al comienzo de mi cadena de consulta no resolvió nada. Este problema solo ocurre en Chrome, y no en todas las computadoras. Solo una CPU. Ocurre también en las incrustaciones vimeo, y posiblemente en otras.

Mi solución para adjuntar al evento ‘mostrado’ y ‘oculto’ de los modos modales de arranque que estoy usando, agregar una clase que establezca el iframe en 1×1 píxeles y eliminar la clase cuando se cierre el modal. Parece que funciona y es simple de implementar.

Las respuestas no funcionaron realmente para mí, tuve un evento de clic en el contenedor y es decir, 7,8,9,10 ignoró el índice Z, por lo que mi solución fue darle al contenedor un color de fondo y de repente funcionó . Aunque se suponía que era transparente, definí el contenedor con el color de fondo blanco, y luego opacidad 0.01, y ahora funciona. También tengo las funciones anteriores, por lo que podría ser una combinación.

No sé por qué funciona, estoy feliz de que así sea.

El código Javascript de BigJacko funcionó para mí, pero en mi caso primero tuve que agregar un código JQuery “sin conflicto”. Aquí está la versión revisada que funcionó en mi sitio:

  

Todo lo que necesitas en el iframe es:

 ...wmode="opaque"> 

y en la URL:

 http://www.youtube.com/embed/123?wmode=transparent