flashyoutube

Arreglo: z-index de youtube y flash encima de todo

Trabajando hace unos días con un menú desplegable con jQuery noté que en ves de desplegarse por encima del video de youtube el menú se esconde detrás del video.

Primero pensé que era un problema de z-index, pero luego de pelear un rato con los posicionamientos y distintos valores de z-index pensé que sería un problema distinto.

El problema está en el browser pone los objetos flash (no solo los videos de youtube) encima de todos los objetos. http://kb2.adobe.com/cps/155/tn_15523.html y por eso hay que asignarle wmode=opaque o wmode=transparent al embed o código que va a producir el SWF.

En el caso de youtube esto se resuelve simplemente colocando ?wmode=opaque al final del código de embed de crea youtube para iframes.

El código original

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

El código con el wmode aplicado

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

Esta explicación la hace detalladamente Max Morgan en su artículo Fix youtube iframe overlay and z-index issues y donde incluso propone una solucion para automatizarlo vía jQuery.

Luego hizo una adaptación para cuando el codigo ya tiene variables escritas en donde escribes el código al final de toda la dirección

Código con varibles

http://www.youtube.com/watch?v=1YmPooYpyQw?rel=0

Código con varibles y wmode

http://www.youtube.com/watch?v=1YmPooYpyQw?rel=0&wmode=opaque

Teniendo cuidado que es probable que luego de una variable es probable que el ?wmode tenga que ser con un “&” &wmode

Te sirvió? Soy todo ojos.

Actualización: Jair nos escribió una forma de cambiar el atributo wmode via jQuery

$(document).ready(function() {
	$(“iframe”).each(function(){
		var ifr_source = $(this).attr(‘src’);
		var wmode = “wmode=opaque”;
		if(ifr_source.indexOf(‘?’) != -1) {
			var getQString = ifr_source.split(‘?’);
			var oldString = getQString[1];
			var newString = getQString[0];
			$(this).attr(‘src’,newString+’?'+wmode+’&’+oldString);
		} else {
			$(this).attr(‘src’,ifr_source+’?'+wmode);
		};
	});
});
  • Gracias por la información! muy útil y si funciona.
    🙂

  • Este funciona con los ultimos navegadores hasta con chrome:

    $(document).ready(function() {
    $(“iframe”).each(function(){
    var ifr_source = $(this).attr(‘src’);
    var wmode = “wmode=opaque”;
    if(ifr_source.indexOf(‘?’) != -1) {
    var getQString = ifr_source.split(‘?’);
    var oldString = getQString[1];
    var newString = getQString[0];
    $(this).attr(‘src’,newString+’?’+wmode+’&’+oldString);
    }
    else $(this).attr(‘src’,ifr_source+’?’+wmode);
    });
    });

    • Corcho

      Gracias por tu comentario Jair. Lo pondré al final del artículo como una opción con jQuery.