Al crear un video slider usando CSS, HTML y JavaScript mejoraras la apariencia de tu página y captar la atención de los visitantes y motores de búsqueda de una manera fácil. Este fragmento de código CSS, HTML y JavaScript te permitirá añadir los videos a tu sitio web de una forma muy elegante. Puedes alojar los videos en formato MP4 en tu propio servidor o si prefieres puedes hacer uso de cualquier servicio de almacenamiento y transmisión gratuitos como Youtube.
Todo el procedimiento de creación e inserción del slider de videos HTML puede tomar tan solo algunos minutos y es muy fácil de llevar a cabo. A continuacion vamos a crear nuestro slider de video.
Creando nuestro archivo index.html
Lo primero que haremos es crear un directorio para poder guardar los archivos necesarios para nuestro video slider, para efecto de ejemplo lo he nombrado “videoslide“, pero tu puedes nombrarlo como desees. Una vez hayamos creado el directorio empezaremos creando nuestro archivo llamado index.html. Copiamos y pegamos el siguiente fragmento de código.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Video Slider usando CSS, HTML5 y JavaScript</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <section > <video id="slider" autoplay muted loop> <source src="video1.mp4" type="video/mp4"> </video> <ul class="navegacion"> <li onclick="cargarVideo('video1.mp4');"> <img src="1.jpg"> </li> <li onclick="cargarVideo('video2.mp4');"> <img src="2.jpg"> </li> <li onclick="cargarVideo('video3.mp4');"> <img src="3.jpg"> </li> </ul> </section> </body> <script type="text/javascript"> function cargarVideo(url){ document.getElementById('slider').src=url; } </script> </html> |
Lo que he hecho en el archivo es crear una estructura HTML simple, luego en el body he creado un etiqueta de video, la cual nos va a permitir cargar un video por default, despues he creado una lista ordenada para poder colocar una función JavaScript dentro de los elementos <li>, dicha función responde a un evento onclick y se ocupa de cargar dinámicamente los videos.
En la lista ordenada he creado 3 videos, los cuales he descargado de pexels.com, a continuación te dejo el enlace de descarga de cada uno de los videos.
- Video 1. Descargarlo y nombrarlos 1.mp4
- Video 2. Descargarlo y nombrarlos 2.mp4
- Video 3. Descargarlo y nombrarlos 3.mp4
Las imágenes que se utilizan para poder visualizar las miniaturas de los video, puedes descargar aquí: Imágenes video slide. Descargar y descomprimir el archivo en el directorio de nuestro proyecto.
Creando nuestro archivo style.css
Ahora vamos a crear el archivo CSS que se encargará de darle un aspecto muy hermoso a nuestro slide de videos. Para ello creamos el archivo llamado “style.css” en el directorio root del proyecto que estamos trabajando. Copiamos y pegamos el siguiente fragmento de código.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
* { margin:0; padding: 0; box-sizing: border-box; } section { position: relative; width: 100%; height: 100vh; } section video{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } section .navegacion{ position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); z-index: 100; display: flex; justify-content: center; align-items: center; } section .navegacion li{ list-style: none; cursor: pointer; margin: 0 10px; border-radius: 2px; background: #eee; padding: 3px 3px 0; opacity: 0.65; transition: 0.6s; } section .navegacion li:hover{ opacity: 1; background: #fff; } section .navegacion li img{ width: 150px; transition: 0.6s; } section .navegacion li img:hover{ width: 200px; } |
Este archivo style.css lo hemos llamado desde el archivo index.html que creamos en el paso anterior.
Te invito a que eches un vistazo al video slider usando CSS, HTML5 y JavaScript o si prefieres puedes descargarlo el fragmento completo a continuación:
DEMO DESCARGAR ARCHIVOS
