cubrir un iframe con una capa, evitando clicks

[mayid]

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.

[kseso?]

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:

.tapa {
  position: absolute;
  top: 0;
  left:0;
  bottom:0;
  right:0;
  z-index:5;
}
 

No se olvide de posicionar el div padre del iframe (diferente a static) para que pueda ser referente del "tapa".

[mayid]

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:

<div class="resizable-iframe">
<div class="iframe-cover"></div>
<iframe width="952px" height="714px" src="http://www.ustream.tv/flash/live/199131"></iframe>
</div>
 

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

Código HTML:

<div class="resizable-iframe">
<div style="height: 714.4px; width: 952.5px; top: 0px;" class="iframe-cover"></div>
<iframe width="952.5px" height="714.4px" src="http://www.ustream.tv/flash/live/199131"></iframe>
</div>
 

Código CSS:

.resizable-iframe{
    overflow: visible;
    height: auto;
    width: auto;
    position: relative;
}
 
.resizable-iframe iframe{
    position: relative;
    z-index: -1; 
}   
 
.iframe-cover{
    position: absolute;   
    z-index: 99999;
    background: yellow;
}
 

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.