jQuery: creare una galleria di video di YouTube

jQuery ci permette di creare gallerie dinamiche di vario genere basandosi su feed remoti in JSONP. YouTube mette a disposizione per ciascun utente un feed JSONP contenente tutte le informazioni e i dati relativi ai video uploadati dall'utente. In questo articolo vedremo come creare una galleria di video di YouTube utilizzando jQuery.

URL del feed e parametri dell'URL

L'URL del feed JSONP ha una struttura di base fissa ed alcuni parametri variabili. I parametri variabili sono il nome utente e il numero di risultati da restituire:

http://gdata.youtube.com/feeds/users/nomeutente/uploads?alt=json&max-results=n

nomeutente e max-results sono i parametri da definire di volta in volta.

Parsing del feed JSONP

Il feed restituisce un oggetto JavaScript definito come feed. Questo oggetto a sua volta contiene oggetti entry che corrispondono alle voci restituite dai risultati. La struttura annidata prosegue utilizzando sia oggetti che array di oggetti.

A noi interessa principalmente ottenere i titoli dei video e l'URL che punta al file video di ciascun video in modo da assemblare un'intestazione HTML e un elemento iframe.

Possiamo quindi definire una funzione che opera sull'oggetto JSON restituito:

function showVideos(data) {
  var feed = data.feed;
  var entries = feed.entry || [];
  var html = ['<ul>'];
  for (var i = 0; i < entries.length; i++) {
    var entry = entries[i];
    var title = '<h3>' + entry.title.$t + '</h3>';
    var urlStr = entry.media$group.media$content[0].url;
    var url = urlStr.substring(0, urlStr.indexOf('?'));
    var iframe = '<iframe src="' + url + '" width="400" height="300" border="0" frameborder="0" allowFullScreen></iframe>';
    html.push('<li>', title, iframe, '</li>');
  }
  html.push('</ul>');
  document.getElementById('youtube').innerHTML = html.join('');
}

youtube è l'ID dell'elemento vuoto che ospiterà la galleria. Quindi possiamo utilizzare questa funzione con jQuery:

$(function() {

	var url = 'http://gdata.youtube.com/feeds/users/gabrieleromanato/uploads?alt=json&max-results=6';
	
	$.getJSON(url, function(data) {
	
		showVideos(data);
		
		console.log(data);
	
	
	});


});

Abbiamo anche inviato l'oggetto alla console JavaScript in modo da poterne ulteriormente studiare la struttura o per scopi di debug.

Stili CSS

Creiamo una galleria fluida e con il posizionamento contestuale facciamo in modo che ciascun video sia allineato verticalmente con gli altri:

#youtube {
	width: 70%;
	max-width: 900px;
	margin: 2em auto;
	font: 90% Arial, sans-serif;
}

#youtube ul {
	margin: 0;
	padding: 0;
	list-style: none;
	overflow: hidden;
}

#youtube li {
	float: left;
	margin: 0 5px 1em 0;
	width: 32%;
	position: relative;
	height: 290px;
}

#youtube h3 {
	margin: 0;
	font-size: 1em;
	font-weight: bold;
	color: #b10;
	padding-bottom: 5px;
}

#youtube iframe {
	display: block;
	width: 100%;
	height: 250px;
	position: absolute;
	bottom: 0;
	left: 0;
}

Potete visionare l'esempio finale in questa pagina.