Día 8: Paginar sobre videos de YouTube Data API con jQuery

Este simple script te ayudará con la tarea de paginar resultados de YouTube a través de su YouTube Data API con jQuery utilizando AJAX y JSONP para hacer las consultas.

Comenzamos asignando dos variables, dónde loadfrom se encargará de cargar los resultados a partir del primer resultado y amount que será la cantidad de videos que queremos cargar.

var loadfrom = 1;
var amount = 6;

Y nuestra función principal, encargada de cargar los videos, recibe estos dos parámetros:

function loadmoar(loadfrom,amount) {
  src = "http://gdata.youtube.com/feeds/api/videos?q=people+are+awesome&alt=json-in-script&max-results=" + amount + "&start-index=" + loadfrom;
  $.ajax({
    dataType: "jsonp",
    url: src,
    success: function(data) {
      if (data.feed && data.feed.entry) {
        var videos = $('#videos');
        $.each(data.feed.entry, function(i, e) {
          id = e.id.$t.split('/').pop();
          videos.append('<li><a href="http://www.youtube.com/watch?v='+id+'" target="blank"><img src="http://img.youtube.com/vi/'+id+'/0.jpg" /><p>' + e.title.$t + '</p></a></li>');
        });
      }
    }
  });
}

Y finalmente hacemos el llamado a la función al cargar el documento y al hacer clic en nuestro botón. Contaremos la cantidad de videos en nuestro contenedor y le sumaremos +1 para mostrar los videos a partir del último video de la lista completa.

$(document).ready(function() {
  loadmoar(loadfrom, amount); 

  $('#moar').on('click',function(e) {
    e.preventDefault();
    loadmoar($('#videos li').length+1, amount);
  });
});

Demo

    Cargar más videos

    palabras / Compartir en: Facebook , Twitter o copiar enlace