Usar el api de youtube con jquery

Al igual que ya hemos hecho con el api de twitter, es posible usar el api de youtube junto con jquery, en concreto con sus potentes capacidades ajax, para mostrar los videos próximos a nuestra zona de busqueda sobre el mapa de nuestro sitio web.

El uso de ajax con jquery es muy simple como vamos a ver con la siguiente función:

function buscarYouTube(distancia, lat, lng) {
    var youTubeUrl = "https://gdata.youtube.com/feeds/api/videos?alt=jsonc&v=2&max-results=50&orderby=published&location=" + lat + "," + lng + "&location-radius=" + distancia + "m";
    $.ajax({
        url: youTubeUrl,
        cache: false,
        dataType: "jsonp",
        beforeSend: mostrarBuscando(),
        complete: ocultarBuscando(),
        success: function(data) {
            if (data) {
                var innerData = data.data;
                if (innerData) {
                    var items = innerData.items;
                    if (items) {
                        var len = items.length;
                        for (var i = 0; i < len; i++) {
                            var item = items[i];
                            if (item) {
                                parsearYouTubeItem(item);
                            }
                        }
                    }
                }
            }
        },
        error: function(jqXHR, textStatus, errorThrown) {
            //Tracking error youTube
            _gaq.push(['_trackEvent', 'Error', 'youTubeText', textStatus]);
            _gaq.push(['_trackEvent', 'Error', 'youTubeError', errorThrown]);
        }
    });
}

En primer lugar construimos la URL de búsqueda en youtube con los parámetros que queremos, en este caso, la latitud, la longitud, y el radio de búsqueda (en metros).

var youTubeUrl = "https://gdata.youtube.com/feeds/api/videos?alt=jsonc&v=2&max-results=50&orderby=published&location=" + lat + "," + lng + "&location-radius=" + distancia + "m";

El resto ya sabemos como hacerlo.


Hay una pequeña demo online en http://www.nioos.com