El desarrollo de esta galería se basa en una estructura html + el uso de estilos visuales y la implementación de jquery con el fin de realizar una consulta a un archivo xml que se encargará de gestionar los vídeos que queremos tener en la galería.
Al final del ejercicio puedes descargar los archivos editables de la galería y puedes usarlo en cualquier proyecto (Puedes contarnos donde la vas a usar mediante un comentario o realiza una mención en twitter a @stivengordillor)
1. Definimos la estructura en HTML
1 2 | <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script type="text/javascript" src="js/script.js"></script> |
1 |
- Incluimos las versión de JQuery desde google
- Incluimos el archivo script que guiará la ejecución de la galería
- Definimos las estructura de los contenedores en HTML y les asignamos clases
- Incluimos un input de tipo checkbox cuyo ID es open-thumbs + un label que se encargará de activar o desactivar el input con el fin de poder realizar la transición para abrir y cerra el video mediante el CSS
2. Definimos los estilos visuales
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 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 | body { margin: 0px; position: relative; } #open-thumbs:checked ~ .reproductor__frame { transition: 0.4s all; width: 100%; } #open-thumbs:checked ~ .reproductor__frame > .reproductor__frame--label { background-position: 0px 50%; } #open-thumbs:checked ~ .reproductor__thumbs { box-sizing: border-box; padding: 1% 3%; transition: 0.4s all; width: 25%; } .reproductor { border: 1px solid #ccc; display: block; height: 350px; margin: 20px auto; max-width: 1024px; overflow: hidden; position: relative; width: 100%; } .reproductor .reproductor__checkbox { display: none; } .reproductor .reproductor__frame { height: 350px; transition: 0.4s all; overflow: hidden; position: absolute; width: 75%; z-index: 2; } .reproductor .reproductor__frame iframe { height: 350px; width: 100%; } .reproductor .reproductor__frame .reproductor__frame--label { background-color: #333; background-position: -40px 50%; background-image: url("img/asset-slide.png"); background-repeat: no-repeat; border-radius: 10px 0px 0px 10px; height: 40%; position: absolute; right: 0px; top: 30%; transition: 0.4s all; width: 40px; z-index: 999999; } .reproductor .reproductor__thumbs { box-sizing: border-box; height: 100%; overflow: auto; padding: 1% 3%; position: absolute; right: 0px; transition: 0.4s all; width: 25%; z-index: 1; } .reproductor .reproductor__thumbs ul { padding: 0px; } .reproductor .reproductor__thumbs ul li { cursor: pointer; list-style: none; position: relative; width: 100%; } .reproductor .reproductor__thumbs ul li figure { display: block; margin: 0; padding: 0; position: relative; width: 100%; } .reproductor .reproductor__thumbs ul li figure figcaption { background: rgba(0,0,0,0.8); bottom: 6px; box-sizing: border-box; color: #fff; font-size: 13px; height: 40px; padding: 5px; position: absolute; text-align: center; width: 100%; } .reproductor .reproductor__thumbs ul li figure img { height: auto; width: 100%; } |
3. Creamos el playlist de videos en un archivo xml donde cada etiqueta video debe ser identificado con el ID de youtube
1 2 3 | <!--?xml version="1.0" encoding="utf-8" ?--> <video id="vTjkzdyi4_E" width="300" height="150"></video> <video id="Answlawb3z0" width="300" height="150"></video> <video id="E7JqnzNBQm0" width="300" height="150"></video> |
El ID del video en youtube se obtiene desde la url
4.Utilizamos JQuery para ejecutar las funciones que activan la galería mediante la función ajax()
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | $(document).ready(function(){ //0 elimina los controles del video - 1 Los habilita controls=1; //0 Elimina la información del video y las opciones para compartir - 1 Los habilita showinfo=0; //0 elimina los videos recomendados al finar la reproducción - 1 Los habilita rel=0; $.ajax({ url: 'xml/lista-de-videos.xml', dataType:'xml', success:function(data){ $(data).find('playlist video').each(function(){ var titulo= $(this).attr('titulo'); var id= $(this).attr('id'); var datos=$('.reproductor__thumbs ul li').size(); var urlVideo= id; var urlImg =" |
1 2 3 4 5 | "; $('.reproductor__thumbs ul').append(urlImg); }) idLoad= $('.reproductor__thumbs ul li:first').attr("id"); $('.reproductor__frame--play').append("<iframe src="httpss://www.youtube.com/embed/' + idLoad + '?rel=' + rel + '&controls=' + controls +'&showinfo=' + showinfo + '" frameborder="0" allowfullscreen="allowfullscreen"></iframe>"); $('.reproductor__thumbs ul li').click(function(){ idVideo=$(this).attr("id"); $('.reproductor__frame--play').empty(); $('.reproductor__frame--play').append("<iframe src="httpss://www.youtube.com/embed/' + idVideo + '?rel=' + rel + '&controls=' + controls +'&showinfo=' + showinfo + '" frameborder="0" allowfullscreen="allowfullscreen"></iframe>"); }) }, error: function(){ $('.reproductor__thumbs ul').text('error'); } }) }); |
- Linea 8: Iniciamos la función .ajax de JQuery
- Linea 9: Importamos el archivo xml donde tenemos el playlist de videos que se van a reproducir
- Linea 10: Mencionamos el tipo de archivo que se va a importar
- Linea 11: Iniciamos la función cuando se ha realizado la carga del archivo xml y creamos una función que invoca el evento data
- Linea 38: Si el archivo xml no carga correctamente, se mostrará un mensaje de error en la sección de la galería que contiene los thumbs de video
- Linea 12: Buscamos dentro del archivo xml y seleccionamos adentro de la etiqueta playlist para obtener la información de cada nodo llamado video
- Linea 13: Creamos una variable que va a almacenar los titulos de cada video
- Linea 14: Creamos una variable que va a almacenar los id de cada video
- Linea 16: Creamos una variable que contendrá la lista de pre visualizaciones que se van a insertar en el documento HTML, le asignamos el valor del ID para poderlos identificar y traemos la visualización del video desde la url de youtube(https://img.youtube.com/vi/ID DEL VIDEO/0.jpg)
- Linea 17: Insertamos los datos obtenidos dentro del HTML y finalizamos la consulta al archivo xml
- Linea 18: Creamos una variable que obtiene el ID de la primera lista que se introduce en el HTML para la carga del primer video
- Linea 19: Creamos la función para cargar cada video al dar clic a los thumbs de la galería
- Linea 3,5 y 7: Creamos variables para poder personalizar los videos de youtube, la linea 3 define si queremos mostrar los controles en el video, linea 5 elimina la información del video y las opciones para compartir, linea 7 elimina los videos recomendados al finalizar la reproducción
Y Listo ya puedes personalizar la galería a tu gusto y utilizarla donde gustes.
!No olvides compartir en las redes sociales si este post te sirvio!
Quiero hacer la misma galería de vídeos PERO SIN YOUTUBE. Tengo varios vídeos dentro de mi pc, pero no los pienso subir a un servidor. ¿Cómo hago?
Hola claudia, necesitas utilizar un servidor asi sea propio para poder publicar tus videos en internet
Hola: Quisiera hacer una galería de vídeos en JQuery, tal cómo se hace una galería de fotos.
Hola, debes subir los videos minímo a un servidor, pero yen en cuenta que te va a consumir ancho de banda y si te van a ser muchos videos se va a terminar truncando la web la web
Hola Stiven, te molesto porque he leido el tutorial deGalería de videos de youtube en html y jquery pero no me funciona y he buscado los archivos pero no los encuentro, me los puedes mandar o indicarme de donde descargarlos?
Gracias
Hola Gonzalo, actualice el script y cargue el botón para descargar los archivos.
Para que la galería funcione en tu navegador debes utilizar un servidor local o tener los archivos en un servidor de internet.
me cuentas si te funciono 🙂
Saludos