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
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    
     
     
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
         	<link rel="stylesheet" href="css/estilos.css">
        <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>
     
     
        <section class="reproductor">
          <input id="open-thumbs" type="checkbox" class="reproductor__checkbox">
          <section class="reproductor__frame">
            <label for="open-thumbs" class="reproductor__frame--label"></label>
     
    <div class="reproductor__frame--play"></div>
     
          </section>
          <section class="reproductor__thumbs">
     
    <ul class="lista"></ul>
     
          </section>
        </section>
    • 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
    4
    5
    6
    
    <!--?xml version="1.0" encoding="utf-8" ?-->
    <playlist>
      <video titulo="El gato con botas y los 3 diablos" id="vTjkzdyi4_E"></video>
      <video titulo="Sonidos de la naturaleza" id="Answlawb3z0"></video>
      <video titulo="El universo agujeros del espacio" id="E7JqnzNBQm0"></video>
    </playlist>

    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
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    
    $(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 ="
     	<li id="&quot;+id+&quot;" class="thumb&quot;+ datos +&quot;">
    <figure><figcaption>"+titulo+"</figcaption><img src="https://img.youtube.com/vi/&quot;+id+&quot;/0.jpg"></figure>
    </li>
    ";
            $('.reproductor__thumbs ul').append(urlImg);
          })
          idLoad= $('.reproductor__thumbs ul li:first').attr("id");
          $('.reproductor__frame--play').append("<iframe src="httpss://www.youtube.com/embed/&quot; + idLoad + &quot;?rel=&quot; + rel + &quot;&amp;controls=&quot; + controls +&quot;&amp;showinfo=&quot; + showinfo + &quot;" frameborder="0" 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/&quot; + idVideo + &quot;?rel=&quot; + rel + &quot;&amp;controls=&quot; + controls +&quot;&amp;showinfo=&quot; + showinfo + &quot;" frameborder="0" 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!

    Like
    Like Love Haha Wow Sad Angry
    342
           
    Haz clic aquí si quieres publicar un comentario para este post
    Suscribirse
    Notify of
    guest

    Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

    2 Comentarios
    Nuevos
    Viejos Más votados
    Inline Feedbacks
    Ver todos los comentarios
    gonzalo
    gonzalo
    4 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