Vista Previa de un Video de Youtube con jQuery

Tutoriales

Demo Github

Cuando subimos un video a nuestro Canal de Youtube, el gestor de videos nos crea 3 pequeñas imágenes para elegir cual de ellas poner como miniatura para nuestro video.

Vamos a usar esas imágenes para representar una vista previa del contenido de nuestro video, para que nuestros usuarios puedan ver un adelante del video que van a ver.

Lo que haremos es que al colocar el puntero del mouse sobre la miniatura, este empiece a intercambiar escenas del video y al retirar el puntero del mouse que estaba sobre la miniatura, se detenga la vista previa. Bueno vamos con el tutorial:

Creamos el archivo llamado script.js en donde colocare mi función javascript que hace una vista previa del video.

Dentro de el archivo script.js coloco comentarios en donde explico para que sirve cada linea de código.

script.js

Ahora creamos nuestra vista, el archivo index.html para visualizar el resultado.

index.html

Ahora vamos a instanciar el javascript en nuestro archivo index.html.
Colocar el siguiente código dentro de las etiquetas <script> </script> :

Listo !

Espero les sirva de mucho el Tutorial.

Sígueme en Twitter: @pepoflex

Hasta nuestro siguiente artículo !

Newsletter

Suscríbete a Nuestro Boletín de Novedades:

(Luego de la suscripción no te va salir ningun mensaje. Solo revisa tu bandeja de Correo para confirmar tu suscripción)
* indicates required