Superponer elementos sobre capas embebidas e iframes – Shipping

Los códigos de vídeos embebidos y las ventanas hechas coniframe, 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 unapantalla 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 propiedadposition:relative que nos permitirá luego incluir otras capas dentro de ella y situarlas dónde queramos conposition:absolute,top yleft (verpropiedad 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ámetrovmode con valortransparent 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 unenlace

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 unmarcador que lleva a este párrafo, pero si fuera un enlace a otra dirección, funcionaría exactamente igual. Para uniframe, 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 ensrc, 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