Tutorial: Poner una imagen delante de un video

Hoy quiero explicar cómo poner una imagen delante de un vídeo de Youtube, Vimeo... es decir al hacer clic en la imagen el video se reproducirá automáticamente en la posición de la imagen. Esto puede servir para personalizar videos en nuestra web o blog. Yo lo necesite para implementarlo en una web y creo que puede ser muy útil así que lo comparto con vosotros.
Copiamos el código, y una vez copiado vamos a modificar las variables que os explico a continuación.
Código genérico:




Variables:

TEXTO_OPCIONAL = Si quereís poner un texto encima o debajo del vídeo, ya sea el título, una breve descripción,..

URL_DE_LA_IMAGEN = Queda más que claro, la dirección donde este alojada la imagen (Para que de un efecto óptimo la imagen debe tener las dimensiones iguales que el vídeo).

URL_DEL_VIDEO = Esta URL es  más complicada. Os la explicaré para vídeos de Vimeo y Youtube

VIMEO


YOUTUBE

MEDIDA_ANCHURA_PIXELES = el ancho del video (preferiblemente igual a la de la imagen)

MEDIDA_ALTURA_PIXELES = la altura del video (preferiblemente igual a la de la imagen)

Ejemplo que implemente yo en el Home de Cuentemelo.NET

Código:




Resultado:

Gana dinero navegando. REGISTRATE GRATIS



Espero que os sirva de ayuda.

Te puede interesar..

3 comentarios:

ANRAFERA dijo...

Interesante opción. Graacias. Saludos

Varo dijo...

Excelente y muy buen post camarada. Por cierto podrías colocar el del truco del dado (post aleatorio)

Saludos

Jose M Romero dijo...

@Varo, me alegro que te guste. Muy pronto lo subiré :D Saludos

@Ramon, Saludos :)

Publicar un comentario en la entrada

:):'(:(:P:D:$;):-I:-X:O|O:S

Recomendamos

RECOMENDAMOS: