2

Tengo el siguiente código

$(document).ready(function(){

   $('.video_display').html('<iframe width="388" height="263" src="https://www.youtube.com/embed/qK0w8PmpA8Q" frameborder="0" allowfullscreen></iframe>');

  		  $('#img1').click(function(){       
   		     $('.video_display').html('<iframe width="388" height="263" src="https://www.youtube.com/embed/Ta9niDCU7wg" frameborder="0" allowfullscreen></iframe>');
        })
        $('#img2').click(function(){       
       		 $('.video_display').html('<iframe width="388" height="263" src="https://www.youtube.com/embed/01d5ajDJOwE" frameborder="0" allowfullscreen></iframe>');
        })
        $('#img3').click(function(){       
       		 $('.video_display').html('<iframe width="388" height="263" src="https://www.youtube.com/embed/db-EZlBDRE0" frameborder="0" allowfullscreen></iframe>');
        })
        
})
.imagen-previa-video {
  list-style: none;
  margin: 0;
  padding: 0;
}
.imagen-previa-video li{
  float: left;
  margin-right: 5px;
}
.imagen-previa-video li img{
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="test" class="video_display"></div>

<ul class="imagen-previa-video">    

    <li id="img1"><img src="https://dummyimage.com/150x110/8a8a8a/fff" alt="Test" /></li>
     <li id="img2"><img src="https://dummyimage.com/150x110/8a8a8a/fff" alt=" " /></li>
     <li id="img3"><img src="https://dummyimage.com/150x110/8a8a8a/fff" alt=" " /></li>   

</ul>
<ul class="list-id-videos" style="display:none">
  <li>Ta9niDCU7wg</li>
  <li>01d5ajDJOwE</li>
  <li>db-EZlBDRE0</li>
</ul>

Quiero conseguir hacer una galeria de videos, que eligiendo el cliente el número de videos según los que tenga, solo deba subir una imagen previa y el id del video de Youtube, entonces via jQuery se relacione.

Si tiene 2 videos tiene que subir 2 imagenes y poner los 2 ID de videos de Youtube, si tiene 3 videos, pues 3 imágenes y 3 Id's, etc.

¿Alguna ayuda por aquí? Muchas gracias de antemano.

2
  • Podrias usar las imagenes que ofrece youtube del video asociado, asi evitas que el usuario suba su propia imagen.
    – jolsalazar
    Commented el 23 feb. 2017 a las 18:32
  • Si, puede ser buena idea, pero como lo hago...? :-(
    – Juan Ayala
    Commented el 23 feb. 2017 a las 18:34

1 respuesta 1

4

La verdad es que no se bien si esto responde tu pregunta. Pero se me ocurre que para evitar que el usuario deba subir una imagen previa del video asociado, consumir directamente un thumbnails del video directo desde youtube, de la siguiente manera.

Tomado del mismo ejemplo que publicaste.

function agregaLista(lista){
  var container = $('.imagen-previa-video');
  
  lista.map(function(video_id){
    container.append('<li class="video" data-id="'+video_id+'"><img src="https://img.youtube.com/vi/'+video_id+'/2.jpg" alt="Test" /></li>');
  })
  
}
$(document).ready(function(){
  var lista = [];
  $('.list-id-videos li').each(function(i, element){
     lista.push($(element).html());
  });
  
  agregaLista(lista);
  
  $('.video').on('click', function(){
    var video_id = $(this).data('id');
    
    $('.video_display').html('<iframe width="388" height="263" src="https://www.youtube.com/embed/'+video_id+'" frameborder="0" allowfullscreen></iframe>');
    
  });
  
   $('.video_display').html('<iframe width="388" height="263" src="https://www.youtube.com/embed/qK0w8PmpA8Q" frameborder="0" allowfullscreen></iframe>');

        
})
.imagen-previa-video {
  list-style: none;
  margin: 0;
  padding: 0;
}
.imagen-previa-video li{
  float: left;
  margin-right: 5px;
}
.imagen-previa-video li img{
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test" class="video_display"></div>

<ul class="imagen-previa-video">

</ul>
<ul class="list-id-videos" style="display:none">
  <li>Ta9niDCU7wg</li>
  <li>01d5ajDJOwE</li>
  <li>db-EZlBDRE0</li>
</ul>

He modificado el codigo para que obtenga el listado de IDs de videos de la lista

  • Youtube permite poder obtener imagenes de un video:

    https://img.youtube.com/vi/<insert-youtube-video-id-here>/0.jpg
    https://img.youtube.com/vi/<insert-youtube-video-id-here>/1.jpg
    https://img.youtube.com/vi/<insert-youtube-video-id-here>/2.jpg
    https://img.youtube.com/vi/<insert-youtube-video-id-here>/3.jpg
    

    Donde tiene distintas calidad de imagenes

    https://img.youtube.com/vi/<insert-youtube-video-id-here>/default.jpg
    https://img.youtube.com/vi/<insert-youtube-video-id-here>/hqdefault.jpg
    https://img.youtube.com/vi/<insert-youtube-video-id-here>/mqdefault.jpg
    https://img.youtube.com/vi/<insert-youtube-video-id-here>/sddefault.jpg
    https://img.youtube.com/vi/<insert-youtube-video-id-here>/maxresdefault.jpg
    

    Me cuentas que tal,

    5
    • Muchas gracias, me parece bien jalar la imagen desde el mismo youtube... gracias. Pero en este caso estoy buscando que el usuario solo ponga en una lista desordenada <li> los id de los videos de youtube, los que el quiera y con eso se pueda conseguir la galeria de videos. Gracias
      – Juan Ayala
      Commented el 23 feb. 2017 a las 18:43
    • ahi modifique con más opciones de calidad de imagen
      – jolsalazar
      Commented el 23 feb. 2017 a las 18:44
    • @JuanAyala ahi modifique la respuesta, ahora desde el listado <li> obtiene los ids de los videos y crea cada uno de los thumbnails pudiendo hacer click en ellos para poder reproducirlos, espero te sirva. saludos
      – jolsalazar
      Commented el 23 feb. 2017 a las 19:07
    • Estimado @jolsalazar muchas gracias, solo me faltaba añadir el primer video en forma dinamica y ya lo consegui, este es el final lo que estaba buscando: jsfiddle.net/mktwebsite/kwkumosk
      – Juan Ayala
      Commented el 23 feb. 2017 a las 19:44
    • Excelente!! @JuanAyala, Saludos!
      – jolsalazar
      Commented el 23 feb. 2017 a las 19:45

    Tu Respuesta

    By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

    ¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.