julio 21, 2012

Nota mental: Permitir capas DIV sobre elementos Flash incrustados

El problema: incrustas un vídeo de Flash en tu blog y tienes equis cantidad de elementos en el diseño del mismo, como por ejemplo una (o más) capas DIV "flotantes". Lo "normal" es que tengas establecidos un valor de Z-INDEX muy elevado para que siempre esté superpuesto sobre otros elementos (en caso de determinado efecto). Pero incrustas un vídeo de otro sitio, más allá de los populares YouTube, Vimeo o DailyMotion y cuyo código entorpece con el "equilibrio visual" del diseño de tu blog.

Para un ejemplo práctico quería incrustar este mismo vídeo que compartí previamente en mi Tumblr, tanto con el código original como con el código modificado, pero Blogger automáticamente corrige el código (precisamente para evitar estos inconvenientes), sin embargo colocaré unas capturas para ver los efectos visibles:


En la primera captura el elemento Flash se superpone a la capa DIV, mientras que en la segunda se muestra como debería de verse en realidad.

Para ello debemos añadir el parámetro (entre la etiqueta <object ...></object>):
<param name="wmode" value="opaque">
y luego la propiedad:  
wmode="opaque"
dentro de la etiqueta <embed ....>.

Además de corregir el problema de la superposición de capas y elementos Flash, también se nota también un cambio en el rendimiento del renderizado.

(fuente: uno de los comentarios de este post de Sheriar Designs)