Contacto

Galería de videos de youtube en html y jquery

  • 6 Comentarios
lee y postea aquí tu comentario

Contenido

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!

¿Te pareció interesante este post?

Lee los comentarios y postea el tuyo aquí

Tienes una empresa o emprendimiento y necesitas mercadeo o transformación digital

Agendemos una cita La reunión inicial de consultoría es gratis
¿Quieres que te contacte? Dejame tus datos y charlamos por Whatsapp

6 Comentarios on Galería de videos de youtube en html y jquery

    gonzalo
    5 July, 2016

    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

    0
    0
    Responder
    Mostrar respuestas
      Stiven Gordillo Ruiz
      7 July, 2016

      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

      0
      0
      Responder
    Enrique
    23 August, 2021

    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.
    0
    0
    Responder
    Mostrar respuestas
      Stiven Gordillo Ruiz
      13 September, 2021

      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

      0
      0
      Responder
    Claudia
    14 February, 2023

    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?

    0
    0
    Responder
    Mostrar respuestas
      Stiven Gordillo Ruiz
      25 February, 2023

      Hola claudia, necesitas utilizar un servidor asi sea propio para poder publicar tus videos en internet

      0
      0
      Responder

Deja tu comentario

Tu email no va a ser publicado
Tu email no va a ser publicado