~D13 - Diseņo Web

imageoverlay


este truco es para  poner una imagen en uno de tus post y que al clickar la imagen cambie a un video... es mejor un ejemplo visual a simples palabras


EJEMPLO




ahora esta es la manera de hacerce

se presiona el boton fuente HTML y se pega el siguiente codigo

<div onclick="thevid=document.getElementById('thevideo'); thevid.style.display='block'; this.style.display='none'"><img height="340" width="560" src="URL DE LA IMAGEN" style="cursor: pointer;" border="1"/></div>
<div id="thevideo" style="display: none;">


ahora se inserta el codigo que obtienes en "insertar" en youtube o cualquier codigo embed de otra pagina


ya que pegaste el codigo, simplemente agregamos esto al final

</div>

recomiendo que
1.- la imagen mida lo mismo que el video (para esto solo hay que editar los valores width y height en el codigo de arriba, estan marcados en amarillo)
2.- utilizar la funcion de autoplay si el video la tiene
3.- si utilizas youtube, marca la opcion  "utilizar codigo de inserccion anterior" aunque con el normal puede funcionar. aun no lo he probado
4.- Si no deseas que la imagen no tenga borde solo edita el numero dentro de border, marcado en verde

=> ¿Desea una página web gratis? Pues, haz clic aquí! <=