SummArg | Cursos y recursos para webmasters

Cómo solucionar la superposición de los videos YouTube con el código viejo y nuevo?

Es frecuente que los videos de YouTube “tapen” un menú u otros contenidos de nuestro website, y que con darle un z-index elevado a nuestros elementos no siempre alcance. Para ello existe una solución desde el código del video.

Para el caso del código de inserción antiguo que utiliza la etiqueta <object>, el truco consiste en añadir la siguiente línea:

<param name="wmode" value="transparent">

y dentro de la etiqueta <embed> añadir el siguiente valor:

wmode="transparent"El código completo quedaría del siguiente modo:
<object width="560" height="340">
<param name="movie" value="http://www.youtube.com/v/77nH0bBug0U&hl=en&fs=1&"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<param name="wmode" value="transparent">
<embed src="http://www.youtube.com/v/77nH0bBug0U&hl=en&fs=1&" type="application/x-shockwave-flash" wmode="transparent" allowscriptaccess="always" allowfullscreen="true" width="560" height="340"></embed>
</object>

En el código de inserción nuevo debemos añadir un sufijo a la URL del video. El código es algo como esto:
<iframe title="YouTube video player" width="640" height="390" src="http://www.youtube.com/embed/lZqrG1bdGtg" frameborder="0" allowfullscreen></iframe>

Y debemos añadir esta terminación:
?wmode=opaque

El código queda así:
<iframe title="YouTube video player" width="640" height="390" src="http://www.youtube.com/embed/lZqrG1bdGtg?wmode=opaque" frameborder="0" allowfullscreen></iframe>

Existe una alternativa vía jQuery que consiste en insertar el sufijo en cuestión colocando el siguiente código antes de la etiqueta de cierre </body>.

$("iframe").each(function(){
var ifr_source = $(this).attr('src');
var wmode = "?wmode=transparent";
$(this).attr('src',ifr_source+wmode);
});

Conocen algún otro método para evitar que los videos YouTube se superpongan con otros elementos de nuestra web?

Dejar un comentario

  1. Información Bitacoras.com…

    Valora en Bitacoras.com: Es frecuente que los videos de YouTube “tapen” un menú u otros contenidos de nuestro website, y que con darle un z-index elevado a nuestros elementos no siempre alcance. Para ello existe una solución desde el código de……

Dejar un comentario