Foros del Web » Creando para Internet » CSS »

Colocar imagen semi-transparente encima de video de youtube

Estas en el tema de Colocar imagen semi-transparente encima de video de youtube en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 26/04/2011, 13:50
Avatar de richicasas  
Fecha de Ingreso: abril-2007
Ubicación: Colombia
Mensajes: 692
Antigüedad: 10 años, 8 meses
Puntos: 13
Exclamación Colocar imagen semi-transparente encima de video de youtube

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.
__________________
Juguetes Sexuales
  #2 (permalink)  
Antiguo 26/04/2011, 14:04
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 9 años, 5 meses
Puntos: 1010
Respuesta: Colocar imagen semi-transparente encima de video de youtube

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
  #3 (permalink)  
Antiguo 26/04/2011, 14:09
Avatar de richicasas  
Fecha de Ingreso: abril-2007
Ubicación: Colombia
Mensajes: 692
Antigüedad: 10 años, 8 meses
Puntos: 13
Busqueda Respuesta: Colocar imagen semi-transparente encima de video de youtube

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??
__________________
Juguetes Sexuales
  #4 (permalink)  
Antiguo 26/04/2011, 14:15
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 9 años, 5 meses
Puntos: 1010
Respuesta: Colocar imagen semi-transparente encima de video de youtube

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';
  #5 (permalink)  
Antiguo 26/04/2011, 14:42
Avatar de richicasas  
Fecha de Ingreso: abril-2007
Ubicación: Colombia
Mensajes: 692
Antigüedad: 10 años, 8 meses
Puntos: 13
Exclamación Respuesta: Colocar imagen semi-transparente encima de video de youtube

Bueno, ya logre colocar la imagen transparente encima de la capa del video.
Código HTML:
Ver original
  1. <div id="video" class="tab_content" >
  2.         <div class="transp"></div>
  3.         <div class="video_trans">
  4.        
  5.             <object width="425" height="350">
  6.             <param name="movie" value="video"></param>
  7.             <param name="wmode" value="transparent"></param>
  8.            <embed src="video" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed>
  9.            </object>
  10.            </div>
  11.            
  12.      </div>

Codigo css
Código CSS:
Ver original
  1. .video_trans{
  2.     position:absolute;
  3.     z-index:5px;
  4.     margin-top:-10px;
  5. }
  6.  
  7. .transp{
  8.     position:absolute;
  9.     width:500px;
  10.     height:350px;
  11.     z-index:4;
  12.     background-image:url(../images/transparencia.png);
  13.     background-repeat:no-repeat;
  14. }

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??
__________________
Juguetes Sexuales
  #6 (permalink)  
Antiguo 26/04/2011, 15:00
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 9 años, 5 meses
Puntos: 1010
Respuesta: Colocar imagen semi-transparente encima de video de youtube

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
Cita:
document.getElementById('idcapa').onclick = function() {
this.style.display = 'none';
}
  #7 (permalink)  
Antiguo 26/04/2011, 15:04
Avatar de richicasas  
Fecha de Ingreso: abril-2007
Ubicación: Colombia
Mensajes: 692
Antigüedad: 10 años, 8 meses
Puntos: 13
Busqueda Respuesta: Colocar imagen semi-transparente encima de video de youtube

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

Saludos.
__________________
Juguetes Sexuales
  #8 (permalink)  
Antiguo 18/06/2016, 20:51
 
Fecha de Ingreso: junio-2016
Mensajes: 1
Antigüedad: 1 año, 5 meses
Puntos: 0
Respuesta: Colocar imagen semi-transparente encima de video de youtube

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?

Etiquetas: encima, video, youtube
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

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 07:47.