Colocar imagen semi-transparente encima de video de youtube

[richicasas]

Hola a todos, no estoy seguro si esto va aca.

Resulta que tengo un vista donde muestro un video de youtube normal.
La cosa es que el cliente quiere que en vez de aparecer el video, aparezca una imagen ya definida como semi.trasparente y que al darle click se muestre y ejecute el video de youtube que se supone esta detras de la imagen.

La verdad no se como hacerlo.

No estoy seguro si es css o javascritp. Alguien que me heche una mano. Les agradezco.

[IsaBelM]

se usan ambos lenguajes.

css para mostrar, posicionar y crear la transparencia de la capa,
javascript para ocultar la capa,

el problema es que al primer click sólo se ocultará la capa, cuando haga click de nuevo en el vídeo se ejecutará,
por cierto todo esto si usar la manera antigua de embeber vídeos, con la nueva manera de iframe, nada de esto es posible

[richicasas]

Antigua me imagino <object.... etc..> asi es que lo hago con HTMl normal.
Depronto tienes alguna referencia de como crear esas campas y el javascript??

[IsaBelM]

esa capa es un bloque div con la propiedades css necesarias para crear el efecto. en cuanto al js, se trata de modificar el dom con document.getElementById('idcapa').style.display = 'none';

[richicasas]

Bueno, ya logre colocar la imagen transparente encima de la capa del video.

Código HTML:

<div id="video" class="tab_content" >
        <div class="transp"></div>
        <div class="video_trans">
        
            <object width="425" height="350">
            <param name="movie" value="video"></param>
            <param name="wmode" value="transparent"></param>
           <embed src="video" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed>
           </object> 
           </div>
           
     </div>
 

Codigo css

Código CSS:

.video_trans{
    position:absolute;
    z-index:5px;
    margin-top:-10px;
}
 
.transp{
    position:absolute;
    width:500px;
    height:350px;
    z-index:4;
    background-image:url(../images/transparencia.png);
    background-repeat:no-repeat;
}
 

Se como esconder un div con javascript, pero PREGUNTA:
Como se hace para que la capa transparente sea un link que llame la funcion para esconderla??

[IsaBelM]

no ha de ser un link. puedes usar el método addEventListener() de dom level 2 o la manera antigua. una vez carges la función con window.onload, haces algo como esto

document.getElementById('idcapa').onclick = function() {
this.style.display = 'none';
}

[richicasas]

Excelente. Ya me funciona como queria. Muchas gracias por la ayuda.

Saludos.

[onetimem2]

En caso de añadir el link o que la capa transparente abra una pagina adicional se cambia NONE en el JavaScript o se le añade el link a la capa?