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

130

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?

usuario249493
fuente
¿Puedes publicar un enlace? Es difícil dar una respuesta útil sin código.
toomanyairmiles
posible duplicado de z-index e iFrames!
stephanfriedrich
posible duplicado del contenido de video
Sampson
Para cualquiera que se pregunte cómo funciona esto en 2015, la <embed wmode="transparent" ...>sección es todo lo que necesita (al menos en Firefox) y no necesita preocuparse por configurar wmode en url's param' s o iframes
RozzA
tenga en cuenta que por alguna razón hay dos tipos diferentes de enlaces de youtube: youtube.com/v/video_id y youtube.com/embed/video_id . El enlace v ignora el índice z en IE, pero incrustar funciona bien.
Anton Lyhin el

Respuestas:

243

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");
    });
});
toomanyairmiles
fuente
66
(Soy el OP) ¡Gracias a todos! Me topé con una solución similar en manisheriar.com/blog/flash_objects_and_z_index La clave parece estar usando tanto name = "wmode" value = "transparent" en un <param> como wmode = "transparent" en el <embed>. Como sospechaba, no es un problema de iframe. Parece ser un problema con Flash que quiere (¿exigente?) El índice z más alto a menos que lo obligue a ser transparente.
user249493
55
Si está utilizando la API JS de iframe, un playerVar wmodetambién funciona aunque no está documentado.
Richard M
1
He integrado esto y mi fancybox stil no funciona en ie7 / 8 y todavía tengo el video en la parte superior. encompasscu.com.au/homeiswheretheheartis qué puedo hacer
Dan
66
La opción? Wmode = transparent funcionó como un encanto para mí. Solo desearía ser más rápido en encontrar la pregunta correcta. 24 horas después de que comencé a buscar, encontré esta respuesta. ¡Gracias por responder y publicar la consulta anterior también!
djmarquette el
1
@ Dan, mira mi edición ... es posible que ya tengas una cadena de consulta en tu código de inserción de YouTube. (como? rel = 0 para no mostrar videos relevantes). Si ese es el caso, use & wmode = transparent (u opaco: he oído que opaque usa menos recursos del sistema, por lo que lo uso principalmente, a menos que tenga una razón para hacerlo transparente).
Sean Kendle
28

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"
    });
  }
});
BigJacko
fuente
Esto funcionó para mí, mientras que la respuesta aceptada no (incluso después de arreglar el código). Gracias por la solución directa.
Tom
? inicia la cadena de consulta de parámetros, y es el delimitador. Cosas básicas. Ver stackoverflow.com/questions/2667551/…
cdonner el
2
¡Esto solucionó mi problema 10 segundos antes de rendirme!
Malibur
1
¡Perfecto! ¡Estaba buscando esto por años!
Jeroen W
2
Está opaqueno Opaque(tenga en cuenta el caso)
Szymon Toda
6

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>
Code.Town
fuente
5

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


Joshc
fuente
2

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>
usuario3410247
fuente
Esto ya se sugirió en muchas respuestas aquí, no es necesario repetirlo con otra respuesta más. Si tiene algo nuevo que agregar, hágalo, de lo contrario, no repita lo que otros ya publicaron.
Shadow Wizard es Ear For You
2

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)

dragoeco
fuente
1

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.

Danny
fuente
1

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.

eduardo
fuente
1

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>
cclay
fuente
1

Todo lo que necesita en el iframe es:

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

y en la URL:

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