Superponer elementos sobre capas embebidas e iframes

Los códigos de vídeos embebidos y las ventanas hechas con iframe, de cuando en cuando nos dan algún problema cuando se portan de manera rebelde y parecen no querer responder a nuestras instrucciones.

Por ejemplo, es común que al desplegar un menú que tiene justo debajo un vídeo, este quede parcialmente oculto por causa de que ese vídeo queda por encima de todo. Lo mismo ocurre cuando creamos algún efecto de capa que oculta todo (vg. cuando queremos simular una pantalla de presentación) y ese dichoso vídeo se nos queda también por encima.

Pues la solución para evitar esto es sencilla, pero como siempre, sólo una vez que se conoce. A eso vamos.


Primero veamos en qué consiste el problema, publicando un fichero flash (.swf) dentro de una capa. Le hemos puesto una propiedad position:relative que nos permitirá luego incluir otras capas dentro de ella y situarlas dónde queramos con position:absolute, top y left (ver propiedad position). En concreto vamos a meter una caja de texto parcialmente por encima de la animación, otra con un enlace algo más abajo y por último, una imagen un poco más allá de la mitad.

Hemos omitido deliberadamente el resto de propiedades CSS que no influyen para la demostración como los anchos, altos, direcciones, etc. Este es el código que usamos y a continuación, el -deficiente- resultado:

<div style="position: relative;>
  <div style="position: absolute;top: -30px;left: 214px;>
    Esta es una capa con texto
  </div>
  <div style=" position: absolute; top: 150px; left: 214px;>
    Esta es otra capa con un <a href="#">enlace</a>
  </div>
  <div style="position: absolute;top: 250px;left: 184px;">
    <img border="0" height="122" src="url_imagen" width="160" />
  </div>
  <object data="url_swf" height="528" type="application/x-shockwave-flash" width="528">
    <param name="movie" value="URL_swf">
  </object>
</div>

Esta es una capa con texto

Esta es otra capa con texto

Cómo se puede comprobar, aunque las tres capas están ahí, sólo se ve lo que el flash no solapa y el resto permanece oculto tras el mismo. Decía al principio que la solución era fácil y así es. Será suficiente con añadir un parámetro vmode con valor transparent y el flash pasará a comportarse como si fuera un fondo quedando detrás de todo lo demás:

<div style="position: relative;>
  <div style="position: absolute;top: -30px;left: 214px;>
    Esta es una capa con texto
  </div>
  <div style=" position: absolute; top: 150px; left: 214px;>
    Esta es otra capa con un <a href="#">enlace</a>
  </div>
  <div style="position: absolute;top: 250px;left: 184px;">
    <img border="0" height="122" src="url_imagen" width="160" />
  </div>
  <object data="url_swf" height="528" type="application/x-shockwave-flash" width="528">
    <param name="movie" value="URL_swf">
    <param name="wmode" value="transparent">
  </object>
</div>

Esta es una capa con texto

Esta es otra capa con un enlace

Ya tenemos nuestro contenido por encima de la animación, pero no hay que olvidar que ahora lo que queda por debajo de esas capas solapadas no funcionará. La parte de los cuadraditos que quedan ocultos evidentemente ya no producen sonidos. Al contrario, el texto de las nuevas capas es seleccionable y el enlace accesible. En este caso es simplemente un marcador que lleva a este párrafo, pero si fuera un enlace a otra dirección, funcionaría exactamente igual. Para un iframe, que es por ejemplo el sistema con el que se insertan actualmente los vídeos de YouTube, el parámetro que nos soluciona la papeleta es el mismo, pero se aplica de distinta manera. En este caso hay que añadirlo a continuación de la dirección del vídeo en src, con el formato ?wmode=transparent:

<div style="position: relative;">
  <div style="position: absolute; top: -30px; left: 164px;">
    Esta es una capa con texto
  </div>
  <div style="position: absolute; top: 210px; left: 10px;">
    <img border="0" height="122" src="url_imagen" width="160" /> 
  </div>
  <iframe allowfullscreen="" frameborder="0" height="315" src="http://www.youtube.com/embed/94E0OSNl_FQ?wmode=transparent" width="420">
  </iframe>
</div>

Esta es una capa con texto

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter