Video de YouTube incrustado a través de iframe ¿Ignorando el índice z?

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 paso el mouse sobre uno de los elementos de navegación de nivel principal en Firefox, el menú desplegable aparece correctamente en la parte superior del video.

Sin embargo, en Chrome e IE9, solo se ve un fragmento del menú desplegable en la pequeña región de espacio que tengo entre el menú y el iframe. El resto 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 pongo explícitamente un z-index:-999 !important; iframe, este problema aún ocurre?

¿Hay algún CSS interno que incluye el código de inserción de YouTube que de alguna manera anula las cosas?

Intente 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 .

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

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 fue en el camino correcto, pero descubrí que elimina por completo la ?rel=0cadena de consulta y la reemplaza con el ?wmode=transparentelemento, lo que tiene el efecto de mostrar la lista de videos sugeridos de YouTube al final de la reproducción, aunque originalmente no No quiero que esto suceda.

Cambié el código para que el srcatributo del video incrustado se escanee primero, para ver si ya hay un signo de interrogación ?(porque esto denota la presencia de una cadena de consulta preexistente, que podría ser algo así como ?rel=0podría en teorí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=transparentse agregará usando el formato: &mode=transparentpara etiquetarlo al final de la cadena de consulta preexistente.

Si no ?se encuentra ninguno , el código funcionará exactamente de la misma manera que lo hizo originalmente (en la publicación de toomanyairmiles ), y se agregará ?wmode=transparentcomo 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 wmodeparámetros necesarios se inyectan o agregan sin dañar lo que había antes.

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

$('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

<iframe id="videoIframe" width="500" height="281" src="http://www.youtube.com/embed/xxxxxx?rel=0&wmode=transparent" frameborder="0" allowfullscreen></iframe>

Sin embargo, tengo el mismo problema en el iframe de YouTube solo en Internet Explorer.

El índice Z se ignoraba por completo, o el video flash solo aparecía en el índice más alto posible.

Esto fue lo que usé, adaptando ligeramente el script jquery anterior.

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

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

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 termina en su configuración de inserción, tiene un ?rel=0al final de su "src"URL. Así que agregué el bit de reemplazo en caso de que ?rel=0exista. De ?wmode=transparentlo contrario no funcionará.

Simplemente podemos agregar ?wmode=transparental 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í: -

<iframe width="420" height="315" src="http://www.youtube.com/embed/C4I84Gy-cPI?wmode=transparent" frameborder="0" allowfullscreen>

Solo este funcionó para mí:

<script type="text/javascript">
var frames = document.getElementsByTagName("iframe");
    for (var i = 0; i < frames.length; i++) {
        src = frames[i].src;
        if (src.indexOf('embed') != -1) {
        if (src.indexOf('?') != -1) {
            frames[i].src += "&wmode=transparent";
        } else {
            frames[i].src += "?wmode=transparent";
        }
    }
}
</script>

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

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

Mi solución para adjuntar al evento 'mostrado' y 'oculto' de los modales de bootstrap que estoy usando, agregar una clase que establece el iframe en 1x1 píxeles y eliminar la clase cuando se cierra el modal. Parece que funciona y es fácil de implementar.

Las respuestas que se muestran a continuación no funcionaron realmente para mí, tuve un evento de clic en el contenedor y, por lo tanto, 7,8,9,10 ignoré el índice z, por lo que mi solución le dio un color de fondo al contenedor y de repente funcionó . Aunque se suponía que era transparente, así que definí el envoltorio con el color de fondo blanco, y luego la 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 lo haga.

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

<script type="text/javascript">
var $j = jQuery.noConflict(); 
jQuery(document).ready(function($j){
  $j('iframe').each(function() {
    var url = $j(this).attr("src");
      if ($j(this).attr("src").indexOf("?") > 0) {
        $j(this).attr({
          "src" : url + "&wmode=transparent",
          "wmode" : "Opaque"
        });
      }
      else {
        $j(this).attr({
          "src" : url + "?wmode=transparent",
           "wmode" : "Opaque"
        });
      }
   });
});
</script>

Todo lo que necesita en el iframe es:

...wmode="opaque"></iframe>

y en la URL:

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