Galería de videos de youtube en html y jquery

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 &gt; .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
id-de-youtube1

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 ="
  • “+titulo+”
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 + '&amp;controls=' + controls +'&amp;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 + '&amp;controls=' + controls +'&amp;showinfo=' + showinfo + '" frameborder="0" allowfullscreen="allowfullscreen"></iframe>"); }) }, error: function(){ $('.reproductor__thumbs ul').text('error'); } }) });
  1. Linea 8: Iniciamos la función .ajax de JQuery
  2. Linea 9: Importamos el archivo xml donde tenemos el playlist de videos que se van a reproducir
  3. Linea 10: Mencionamos el tipo de archivo que se va a importar
  4. 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
  5. 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
  6. Linea 12: Buscamos dentro del archivo xml y seleccionamos adentro de la etiqueta playlist para obtener la información de cada nodo llamado video
  7. Linea 13: Creamos una variable que va a almacenar los titulos de cada video
  8. Linea 14: Creamos una variable que va a almacenar los id de cada video
  9. 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)
  10. Linea 17: Insertamos los datos obtenidos dentro del HTML y finalizamos la consulta al archivo xml
  11. 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
  12. Linea 19: Creamos la función para cargar cada video al dar clic a los thumbs de la galería
  13. 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!

       
Haz clic aquí si quieres publicar un comentario para este post
Suscribirse
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

6 Comentarios
Nuevos
Viejos Más votados
Inline Feedbacks
Ver todos los comentarios
Claudia
Claudia
1 Año Hace

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?

Enrique
2 Años Hace

Hola: Quisiera hacer una galería de vídeos en JQuery, tal cómo se hace una galería de fotos.

  1. Los vídeos NO son de YouTube o cualquier otra plataforma de vídeos.
  2. Los vídeos lo tengo dentro de mi computadora y no los pienso subir a ningún servidor de vídeos, para poder hacer la galería.
  3. Intento hacer en una página las miniaturas de los vídeos, con tal de que cuando de clic sobre el vídeo, se me abra sobre si mismo en una ventana emergente, pero más grande.
gonzalo
gonzalo
7 Años Hace

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