Artículos

Como hacer que una pelicula flash salga detras de una ventana modal

  •   Publicado el: 13-06-2011
  •   Visitas: 15826
Como hacer que una pelicula flash salga detras de una ventana modal

Las ventanas modales estan muy en boga desde hace buen tiempo. Estan vinieron a reemplazar a los horribles popups que antes todo el mundo usaban.
Para los que no conocen que es una ventana modal pues nos referimos a estas ventanas que aparecen al hacer click sobre algun enlace en una web como una foto por ejemplo y que en lugar de abrir el nuevo contenido en una ventana del navegador lo hacen en una capa que se coloca sobre la página actual mientras que todo lo que esta detras queda oculto por una pelicula semitransparente.
De estas ventanas modales hay muchas en Internet, yo por ejemplo uso mucho NyroModal por su versatilidad, gran cantidad de opciones y la posibilidad de crearlas al vuelo sobre todo cuando la uso junto con AJAX.
Pero estas ventanas modales nos dan problemas cuando tenemos peliculas Flash en nuestro contenido.
Si ya se que Flash ha muerto pero aun se usa mucho en los videos, hasta que webM se estandarice se seguirá usando.
Entonces cuando tenemos un Flash y desplegamos una ventana modal esta queda por debajo del Flash por mas propiedades de estilos que usemos para evitarlo.
La solución a esto es muy sencilla, digamos que tienen un video de youtube en su web y más abajo un enlace que abrirá una ventana modal, para evitar q el flash prevalezca sobre esta lo que deben hacer es agregar la propiedad wmode igual a transparent al código con el que insertan el video en la página.
Para esto deben usar claro el código antiguode Youtube para embeber el video y no el iframe que se usa actualmente.
Pongamos en ejemplo práctico, si quiero colocar este video en mi web, cuyo enlace en youtube es:
http://youtu.be/xPIbuTx7ENU

El código para embeberlo, el antiguo claro, es el siguiente:


 

Lo que haremos entonces es valernos de la propiedad wmode=transparent para obligar a la pelicula a que se transparente.

Lo haremos agregando el siguiente parametro a la etiqueta object:

Y este atributo a la etiqueta embed: wmode="transparent"

El código quedaría entonces así:
 


 

Eduardo Rosadio

Soy desarrollador web desde el año 2001. Durante mis años de trabajo he desarrollado más de 1000 sitios web para empresas de todos los rubros y tamaños.

En los últimos años me he especializado en el marketing por Internet para ayudar a mis clientes, mayormente pequeñas empresas, a llegar a nuevos clientes a través de Internet.

No te vayas sin dejar un comentario