Foros del Web » Creando para Internet » CSS »

cubrir un iframe con una capa, evitando clicks

Estas en el tema de cubrir un iframe con una capa, evitando clicks en el foro de CSS en Foros del Web. Necesito un iframe para mostrar canales de TV en un sitio web. El iframe contiene elementos flash (el reproductor de la tv) que si uno ...
  #1 (permalink)  
Antiguo 16/02/2012, 10:15
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 12 años, 2 meses
Puntos: 101
cubrir un iframe con una capa, evitando clicks

Necesito un iframe para mostrar canales de TV en un sitio web. El iframe contiene elementos flash (el reproductor de la tv) que si uno los clickea redirigen a otra web. Es esto lo que quiero evitar, subriendo el iframe con un div, puesto que con js me ha sido imposible capturar los clicks.

El problema esta en que a menos que mi div tenga un color sólido, no cubre el iframe. Y no se por qué sea así! Es decir, mi div cubre el iframe casi completamente, pero solo en tanto tengo un color asignado. Si no lo tiene, el iframe predomina sobre el div.

Probé varias cosas:
- usar un png transparente como color de fondo.
- usar transparencia: rgb(0, 0, 0, 0,1) Pero al poner transparencia ya no funciona el truco de solapar el iframe con un div.
- poner position relative y z-index: -1 al iframe (mientras que pongo z-index alto para mi div )

Mi div tiene posicion absolute, es block, tiene ancho y alto definidos y no flota. Que mas puedo hacer? Obviamente no puedo usar un color solido. Pero no entiendo por que solo funciona de esta manera.
  #2 (permalink)  
Antiguo 16/02/2012, 14:55
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 14 años
Puntos: 539
Respuesta: cubrir un iframe con una capa, evitando clicks

Mayid, esos códigos...

¿Qué navegador está usando?
Prueba hecha en firefox sin declara fondo y no se ve, pero se siente. Esto es, tapa el contenido de su div padre.

Sugerencia:
Coloque su iframe dentro de un div
Una vez cerrado el iframe añada un div dentro del anterior.
Declare tal que así:
Código CSS:
Ver original
  1. .tapa {
  2.   position: absolute;
  3.   top: 0;
  4.   left:0;
  5.   bottom:0;
  6.   right:0;
  7.   z-index:5;
  8. }
No se olvide de posicionar el div padre del iframe (diferente a static) para que pueda ser referente del "tapa".
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #3 (permalink)  
Antiguo 17/02/2012, 12:36
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 12 años, 2 meses
Puntos: 101
Respuesta: cubrir un iframe con una capa, evitando clicks

kseso: lo que comentas es exactamente lo que tengo. Un div padre, con position relative. Dentro, un iframe con bajo z-index (o z-index negativo) mas un div que lo cubre y que tiene position absolute y z-index muy alto.

Algo así:

Código HTML:
Ver original
  1. <div class="resizable-iframe">
  2. <div class="iframe-cover"></div>
  3. <iframe width="952px" height="714px" src="http://www.ustream.tv/flash/live/199131"></iframe>
  4. </div>

Con css (en parte inline) queda algo así:

Código HTML:
Ver original
  1. <div class="resizable-iframe">
  2. <div style="height: 714.4px; width: 952.5px; top: 0px;" class="iframe-cover"></div>
  3. <iframe width="952.5px" height="714.4px" src="http://www.ustream.tv/flash/live/199131"></iframe>
  4. </div>

Código CSS:
Ver original
  1. .resizable-iframe{
  2.     overflow: visible;
  3.     height: auto;
  4.     width: auto;
  5.     position: relative;
  6. }
  7.  
  8. .resizable-iframe iframe{
  9.     position: relative;
  10.     z-index: -1;
  11. }  
  12.  
  13. .iframe-cover{
  14.     position: absolute;  
  15.     z-index: 99999;
  16.     background: yellow;
  17. }

Si quito el color amarillo de fondo, el iframe predomina sobre el div. En cambio, con un color solido, el div cubre el iframe.

Nota: el iframe contiene un video que no tiene la propiedad wmode declarada.

Etiquetas: clicks, cubrir, evitando, iframe, capas
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 00:56.