Como poner una capa encima de otra.
En una tabla he puesto un video, el video al pulsar sobre él te abre una página, lo que intento es poner una capa transparente encima de este video para anular esa acción.
Te dejo un ejemplo que encontré para que veas lo que intento hacer, solo hay que cambiar la opacidad para que quede transparente.
<style>
.cnt{
width:450px;
background-color:#DDAADD;
margin:0px;
padding:15px;
font-weight:bold
}
.trans{
background-color:#00BB00;
color:#CC0000;
position:absolute;
text-align:center;
top:50px;
left:40px;
padding:65px;
font-size:25px;
font-weight:bold;
width:300px;
}
</style>
<div class="trans" style="z-index:1;filter:alpha(opacity=60);float:left;-moz-opacity:.60;opacity:.60">
<p>Esta es la capa transparente</p>
</div>
<div class="cnt">
<object width="425" height="344">
<param name="movie" value="http://www.youtube.com/v/-L4pMmyMwMU&hl=es&fs=1&"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<param name="wmode" value="opaque"></param>
<embed src="http://www.youtube.com/v/-L4pMmyMwMU&hl=es&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344" wmode="opaque"></embed>
</object>
</div>
El problema es que en este caso si se puede, pero hay otros en los que el video se queda siempre encima, no sé si hay que cambiar algo en este código.
Te dejo un ejemplo que encontré para que veas lo que intento hacer, solo hay que cambiar la opacidad para que quede transparente.
<style>
.cnt{
width:450px;
background-color:#DDAADD;
margin:0px;
padding:15px;
font-weight:bold
}
.trans{
background-color:#00BB00;
color:#CC0000;
position:absolute;
text-align:center;
top:50px;
left:40px;
padding:65px;
font-size:25px;
font-weight:bold;
width:300px;
}
</style>
<div class="trans" style="z-index:1;filter:alpha(opacity=60);float:left;-moz-opacity:.60;opacity:.60">
<p>Esta es la capa transparente</p>
</div>
<div class="cnt">
<object width="425" height="344">
<param name="movie" value="http://www.youtube.com/v/-L4pMmyMwMU&hl=es&fs=1&"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<param name="wmode" value="opaque"></param>
<embed src="http://www.youtube.com/v/-L4pMmyMwMU&hl=es&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344" wmode="opaque"></embed>
</object>
</div>
El problema es que en este caso si se puede, pero hay otros en los que el video se queda siempre encima, no sé si hay que cambiar algo en este código.
1 Respuesta
Respuesta de Victor Portero
1