Vídeo de YouTube Incrustado a través de iframe Ignorando z-index?

La respuesta de Joshc estaba en el camino correcto, pero descubrí que elimina totalmente el ?rel=0 querystring y lo reemplaza con el elemento ?wmode=transparent, lo que tiene el efecto de mostrar la lista de Videos sugeridos de YouTube al final de la reproducción, a pesar de que 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 ya hay un signo de interrogación ? en él (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, queremos preservarla, no destruirla, porque representa un ajuste elegido por quien pegó en este video de YouTube, ¡y presumiblemente lo eligieron por una razón!

Entonces, si se encuentra ?, el wmode=transparent se agregará usando el formato: &mode=transparent para etiquetarlo al final del pre-existente cadena de consulta.

Si no se encuentra ?, entonces el código funcionará exactamente de la misma manera que lo hizo 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 ya, se conserva, y los parámetros requeridos wmode se inyectan o agregan sin dañar lo que estaba allí antes.

Aquí está el código para caer en su document.ready funció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>

Tengo el mismo problema en YouTube iframe incrustado solo en Internet explorer, aunque.

Z-index estaba siendo ignorado totalmente, o el video de flash solo estaba apareciendo 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 de YouTube...

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

El jQuery slighty 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 lo haces seleccione Mostrar vídeos sugeridos cuando el vídeo termine en su configuración de incrustación, tiene un ?rel=0 al final de su url "src". Así que he añadido 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 dirá a YouTube que incluya el video con el conjunto wmode. Así que el 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 pie de página.archivo php Wordpress. Código encontrado en comentario aquí (gracias Gerson)

Wmode=opaco o transparente al principio de mi cadena de consulta no solucionó nada. Este problema para mí solo se produce en Chrome, y no en todos los equipos. Sólo una cpu. Se produce en incrustaciones de vimeo, así, y posiblemente otros.

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

Las respuestas abow no funcionaron realmente para mí, tuve un evento de clic en la envoltura e ie 7,8,9,10 ignoró el índice z, por lo que mi corrección le dio a la envoltura un color de fondo y de repente funcionó. Aunque se suponía que era transparente, así que definí la envoltura 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 lo haga.

El código Javascript de BigJacko funcionó para mí, pero en mi caso primero tuve que agregar algo de 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 necesitas en el iframe es:

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

Y en la URL:

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