Superponer elementos sobre capas embebidas e iframes | Oloblogger Los códigos de vídeos embebidos y las ventanas hechas con iframe , de cuando en cuando nos dan algún...

20 de febrero de 2012

51 ☆ 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 .

Interacciones en Google+

51 comentarios :

  1. que bueno quedo el diseño del blog, saludos suerte en todo!

    ResponderEliminar
  2. ESTO! es lo que buscaba! Muchas Gracias Oloman!

    ResponderEliminar
    Respuestas
    1. Has tenido mucha suerte de que tuviera esto a medio ver porque normalmente tardo muuuuucho más ;)

      Eliminar
    2. No crees en el destino o en la ley de atracción o causa y efecto? :) Abrazo Oloman!

      Eliminar
  3. Hola oloman! lo primero de todo felicitarte por tu trabajo, el cual sigo y agradezco desde hace ya muchos años.
    Te escribo para preguntarte por una duda referente a una plantilla. Al igual que tú, me he decidido a darle un nuevo aire a mi blog. Tras mucho buscar di con una que me encanta Shutter Shot pero, por alguna razón que desconozco, no consigo visualizarla, una vez instalada en mi blog (mariahortal.blogspot.com), en IE. Sin embargo, en la descripción de la plantilla dice que es compatible con este navegador y el demo de la misma, al cual te he puesto un enlace más arriba, funciona perfectamente en IE.
    Espero que me hayas entendido y que no te moleste mi pregunta. Gracias de antemano.

    ResponderEliminar
    Respuestas
    1. ¿Qué versión de IE tienes? Es que en IE8 se ve bien. Por cierto, espectacular esa plantilla.

      Eliminar
    2. Hola! muchas gracias por responderme. Utilizo una versión anterior y, como te dije, aunque el demo si puedo verlo a la perfección no ocurre lo mismo con mi blog...

      Eliminar
    3. No lo indiqué, pero yo veo bien AMBAS, la tuya y la demo. No puedo ayudarte mucho, pero existe la posibilidad de que esta última (la demo) pueda ser distinta en algo al fichero para descarga. Creo que lo mejor es que preguntes en el sitio dónde facilitan la plantilla. El administrador sabrá bien cual es el problema si realmente lo hay.

      Eliminar
  4. Uffff menudo cambio!! es muy distinto a lo que nos tenías acostumbrados, mucho más actual y diáfano.
    Personalmente me cuesta eso de la sidebar fija pero lo compensa el footer.
    Muy acertado ;)

    ResponderEliminar
    Respuestas
    1. Po zi. Tenía ganas de cambiar y lo he hecho a lo bestia.

      Sobre la sidebar, siempre dudas entre qué poner y qué quitar y al final lo segundo casi que no lo hacemos. Sin embargo, casi todo es prescindible. De hecho todavía podría quitar de ahí los enlaces a páginas y no pasaría nada. Seguro ;)

      Ya sabes que sé que ahora estás con más faena que de costumbre y no precisamente por el blog. Enhorabuena de nuevo :)

      Eliminar
    2. Tienes razón es fácil caer en la tentación de llenar de cosas innecesarias.
      No tengo faena en ese sentido sino más bien trabajo atrasado en los dos sitios por donde me muevo :) 15 días sin hacer nada son muchos días.

      Eliminar
  5. HOLA oloman, te felicito que blog tan genial y tu diseño es realmente espectacular, bueno mi pregunta es la siguiente, deseo utilizar un iframe pero deseo que este dectecte la altura autmaticamente dependiendo del contenido que se adapte a este, estuve investicando un poco y vi algo con un script de jquery pero realmente no fui capas de implementarlo, ojala puedas ayudarme, muchas gracias por tu ayuda y un saludo desde colombia. EXITOSSS

    ResponderEliminar
    Respuestas
    1. mira aqui es donde encontre lo de jquery http://blog.webgpdesign.com/jquery-auto-iframe-height-altura-automatica-de-iframe/

      Eliminar
    2. Cuando publiqué lo de Google Docs hace unos días, tuve ese mismo problema con la encuesta-demo que puse. También estuve buscando cómo solucionar lo de adaptar la altura del iframe según su contenido, pero no encontré nada óptimo. ¿Te diste cuenta de que ese plugin no funcionará si la página dónde se pone el marco no es del mismo dominio que el contenido del mismo?

      NOTA: Hay que tener en cuenta que este plugin de jQuery “autoHeight” no funcionará con iFrames que accedan a contenidos desde un dominio diferente de donde esté alojado, puesto que si la ventana contenedora y el contenido están alojados en dos dominios o servidores distintos las restricciones de seguridad anularan el control del contenido con JavaScript. Por lo tanto, desde nuestro dominio, no podremos hacer un AutoHeight, por ejemplo, de un contenido de Google.com.

      Eliminar
    3. OK entonces que me recomiendas oloman, para variar la altura o siempre tendra que estar fija muchas gracias por tu tiempo ojala y tengas una solucion...

      Eliminar
    4. Pues yo no encontré nada, aunque tampoco busqué exhaustivamente. Si tienes mucho interés puedes seguir la búsqueda de alguna solución que no sé si realmente existe. Caso contrario no tendrás más remedio que poner una altura fija suficiente para que quepa lo que quieres que se muestre.

      Eliminar
  6. Hola,hace tiempo os tengo enlazados,pero vosotros a mi no , no debería ser reciproco?

    Una pregunta importante,al parecer algo no funciona bien.¿Hay posibilidad que os enseñe una plantilla,sin ser exhibida publicamente,para que me digais,que anda mal? De tanto en tanto se cruzan codigos que nos on mios.Ntengo html, simplemente sigo instrucciones.Gracias.

    ResponderEliminar
    Respuestas
    1. Lo del enlace es voluntad de cada cual y no hay un sistema automático si es que crees que es así. Abajo podrás ver los blogs que yo tengo enlazados (Referencias), que son en mi caso los que tienen un contenido interesante para mí y creo que para los que leéis esto. Como decía, cada administrador muestra los enlaces que desea y en algunos casos, ninguno.

      A veces sucede que se piden o acuerdan enlaces recíprocos, pero eso no es ni más ni menos que un interés por mejorar posicionamiento ante los buscadores. No es mi caso.

      Si el blog es público, cualquiera puede verlo y con que me pases la dirección sería suficiente. Si lo tienes "Sólo para lectores invitados" tendrías que enviarme una invitación a mi dirección de correo. Está al final del "Aviso legal" y este último, al final de esta misma página.

      Eliminar
  7. Hola oloman, ya intente con este nuevo código pero la ventana sigue mostrándose debajo del reproductor "flowplayer" aquí le dejo el código del reproductor http://paste2.org/p/1922138(lo que va en la entrada) haber si es que se hace de manera diferente.
    Espero que sea posible poner estas capas sobre ese reproductor y le agradezco la colaboración prestada.

    ResponderEliminar
    Respuestas
    1. ¿Me podrías pasar una página dónde se vea ese reproductor funcionando? Es que sospecho que ese script no genera ni un flash embebido ni un iframe y en ese caso no creo que se pueda aplicar esto.

      Eliminar
  8. Hola Oloman. En esta url http://somospremium-cookies.blogspot.com/ en donde se encuentra el video original y uno de los problemas que me aparecen,(en el pasado quedaba la capa detras del video y con este queda encima pero al cerrar queda un espacio en blanco que apunta a la url donde esta guardado el video) me gustaria que me ayude a encontrar la forma de usarlo en este reproductor. Gracias por las respuestas.

    ResponderEliminar
    Respuestas
    1. Lo que veo allí es que el segundo "Flowplayer" no tiene contenido. Parece que hay algo mal en ese segundo porque no hay ningún embed. Prueba a moverlo y poner el código del primero en el sitio del segundo. No dejes los dos porque si tienen el mismo ID es posible que no vaya bien.

      Eliminar
  9. video 1 http://somospremium-cookies.blogspot.com/2012/03/especial-de-navidad.html y video 2 http://somospremium-cookies.blogspot.com/2012/03/transformers-2.html

    En uno aparece la ventana debajo del reproductor y en el otro aparece la ventana encima pero al cerrarlo no se ve el reproductor

    ResponderEliminar
    Respuestas
    1. No sé si lo que yo veo en el código fuente, es lo que tú tecleas o lo que algún script escribe, porque no conocía ese reproductor. He hecho unas pruebas y parece que con wmode="opaque" funciona, pero tampoco lo hace muy bien. En este enlace hay un foro específico sobre flowplayer y hay algunas preguntas sobre eso: Enlace

      Yo he sustituido transparent por opaque, he insertado ese mismo parámetro en el embed y además he añadido tras la dirección del vídeo ?wmode=opaque, para que no faltara ninguno :D y se veía el cuadro negro por encima. Entre esto último y el foro, quizás encuentres la solución.

      Eliminar
    2. Muchas gracias Oloman por las respuestas, al final cambie de reproductor y ya me funciona perfecto este aporte.

      Eliminar
    3. Bueno, esa era otra opción XD

      Eliminar
  10. muy buen post, me ayudo bastante.. yo personalmente le agregue eun javascript que al clickar sobre el video me muestra una publicidad (algo molesto xD)... y despues con una funcion de alternar.. desaparesco el javascript para ya darle play al video.. muchas gracias

    ResponderEliminar
  11. Saludos!, me encantaria saber como hago para desaparecer esos elementos superpuestos cada cierto tiempo y adicional agregar un boton de cerrar? saludos!!.

    ResponderEliminar
  12. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  13. Hermano un millon de gracias , lo pude implementar eficazmente al componente Wrapper de joomla ;)

    ResponderEliminar
  14. BUENA BRO ME SALVASTE LA VIDA!!! xD JUSTO TENIA UN MENU Q BAJABA Y EL FUCKING IFRAME SE SOBREPONIA GRACIAS!!!! EXITOS!!!!!

    ResponderEliminar
  15. hola, se que no es el sitio adecuado ni nada pero, se me han desaparecido la opción de respuesta en los comentarios. Ayuda, gracias y felices fiestas

    ResponderEliminar
    Respuestas
    1. Las cosas no desaparecen solas, así que sería de ayuda que recordaras que hiciste antes de que pasara eso... y también que me dijeras en cual de tus blogs pasó.

      Eliminar
    2. No se cual es el problema en este blog formula1d.blogspot.com, tengo en un blog de pruebas exactamente la misma plantilla y me funcionan los comentarios pero en ese blog no.

      Eliminar
    3. Dejé un mensaje de prueba y funcionó correctamente. Hasta me respondía a mí mismo en una segunda prueba ;)

      Eliminar
    4. Por cierto... Creo que sé de dónde sacaste ese estilo para el rótulo del nombre de tu blog XD

      Eliminar
  16. Gracias por tus acertadas sugerencias. Felicitaciones por tu trabajo.

    ResponderEliminar
  17. Muchas gracias estaba buscando esto

    ResponderEliminar
  18. Gracias por el aporte, funcionó muy bien .... felicitaciones

    ResponderEliminar
  19. Arigato Sensei

    Mi problema consistía en que deseaba poner un banner publicitario
    promocional, sobre mi pagina web hecha en flash, ha salvado ud la patria.
    Un saludo desde Colombia

    ResponderEliminar
  20. Peter. Hola, de verdad felicitaciones por ser tan explícito. Estoy haciendo una web social que muestra en un mapa de una ciudad hecha en flash (.swf) puntos referenciales de servicios que se prestan a la comunidad. Mi pregunta es si puedo mediante un iframe (utilizándolo como una capa sobre el archivo swf)colocar los puntos referenciales(a solicitud del usuario del servicio que busca) mediante imágenes que son links a otras páginas.

    Saludos y gracias por tus respuestas

    ResponderEliminar
    Respuestas
    1. Un iframe sobre el flash no te va a funcionar, a menos que sea muy pequeño y, al igual que en este ejemplo con las imágenes y/o textos, ocupen sólo una pequeña porción del espacio que ocupa.

      Eliminar
  21. Saludos: Creo que es una gran labor la tuya ayudando a los ignaros como yo. Felicidades. Tengo un problema y me gustaría saber si me puedes ayudar: tengo el mismo problema que resolviste en éste artículo "SUPERPONER ELEMENTOS SOBRE CAPAS EMBEBIDAS E IFRAMES", pero lo tengo en una página .html no en flash existe solución para que el menú del iframe superior se despliegue sobre los elementos del iframe inferior?
    Gracias.

    ResponderEliminar
    Respuestas
    1. No lo he probado nunca porque eso que necesitas no es habitual, pero supongo que podría funcionar este mismo sistema. Sólo con probarlo ya sales de dudas ;)

      Eliminar
  22. Hola que tal, probe con lo que pusiste pero aun persisto con el problema, mi menu desplegable se muestra debajo de un video que coloque, espero me puedas ayudar con este inconveniente. gracias.

    ResponderEliminar
    Respuestas
    1. Hola Miler. Otra solución para según que casos, sería poner al menú un z-index con un valor alto.

      Eliminar
  23. Hoka Oloman!

    Tengo un pequeño problema con una plantilla de Worpress, la llamada Shuttershot. El caso es que intento hacer una web seria con una imagen seria... Pero el que ponga "Shuttershot" en lugar del nombre de mi producto no lo es nada, y esa plantilla es lo mejor que ve visto, tanto de pago como gratuitas.

    Sabes como podría quitar ese letrero??

    Saludos y gracias por todo,
    Pablo.

    ResponderEliminar
    Respuestas
    1. No conozco esa plantilla (hay miles) pero he buscado y lo que encontré parece indicar que no debe ser difícil. Seguramente se trata sólo de cambiar el título en la propia plantilla ¿En qué dirección la tienes instalada?

      Eliminar
  24. Muchas gracias,, me has solucionado el problema!!!

    ResponderEliminar