martes, 29 de marzo de 2011

Cuando los videos se sobreponen

Quienes tienen un menú de subpestañas seguramente alguna vez habrán notado que cuando hay un video debajo del menú las subpestañas se esconden detrás del video y pareciera que se trata de un error del menú aunque no lo es. Lo que sucede es que estos videos que insertamos no tienen "transparencia" por defecto por lo que se sobreponen a todo elemento que haya en su misma área.

Vemos este claro ejemplo de este menú drop and down como las subpestañas se muestran por detrás del video.







Para solucionarlo aplicaremos el atributo transparent al parámetro wmode.
Por ejemplo, en los códigos de inserción antigua de los videos de YouTube tenemos un código como este y agregamos lo que está en color rojo:
<object width="640" height="390"><param name="movie" value="http://www.youtube.com/v/XSGBVzeBUbk?fs=1&amp;hl=es_ES&amp;rel=0"></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/XSGBVzeBUbk?fs=1&amp;hl=es_ES&amp;rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="390" wmode="transparent"></embed></object>

Y con eso el video ya no se sobrepondrá ni al menú ni a otro objeto.






Si ya usas el nuevo código de inserción de videos (iframe) que ofrece YouTube entonces el atributo se agrega al final de la URL del video:
<iframe title="YouTube video player" width="640" height="390" src="http://www.youtube.com/embed/XSGBVzeBUbk?rel=0&amp;wmode=transparent" frameborder="0" allowfullscreen></iframe>

Esta solución debe ser efectiva para la mayoría de los navegadores sino es que con todos, al menos yo lo he probado en Opera, Safari, Mozilla Firefox, Google Chrome e Internet Explorer. Quizá las versiones antiguas de IE se resistan pero... ¿aun habrá gente que las use? Por mi salud mental espero que no.

No hay comentarios:

Publicar un comentario