Integrare le API di Youtube con PrettyPhoto

esempio_youtube_api

L’integrazione del video nei siti web è ormai diventata una pratica comune, l’inserimento in una pagina web è molto semplice soprattutto se supportato da un servizio che ospita e gestisce i contenuti video come Youtube.

Nell’articolo di oggi mostrerò una semplice integrazione tra le Youtube API e il plugin per JQuery Prettyphoto per ottenere una galleria di video in stile Youtube da inserire nella pagina del proprio sito.

Le Youtube API non sono altro che librerie messe a disposizione degli sviluppatori per gestire con semplicità i contenuti di Youtube su un sito esterno. E’ possibile integrarle con diversi linguaggi e tecnologie, nell’esempio di oggi vedremo com’è possibile utilizzarle con javascript. Per ulteriori informazioni è possibile consultare la relativa documentazione.

PrettyPhoto è un plugin per jquery simile in tutto e per tutto a Lightbox (per prototype e scriptaculus) ulteriori informazioni sono disponibili sul sito ufficiale di PrettyPhoto.

Per questa soluzione sono partito dall’esempio fornito da Youtube nella rispettiva documentazione. Lo script proposto carica dal canale desiderato le thumbnails dei video e il rispettivo titolo, caricando inoltre il player che esegue il filmato sul quale viene cliccato.

Nel nostro caso desidero mantenere le thumbnails e i titoli ma preferisco evitare che il player occupi spazio nella pagina, modificherò quindi lo script per permettere l’apertura del video in un div grazie al plugin PrettyPhoto.

Per iniziare creiamo la nostra pagina html, avendo l’accortezza di lasciare un div con id nel quale verranno caricate le thumbnails dei video.

Caricare i dati da Youtube

Ora possiamo iniziare a creare il javascript che richiamerà i dati necessari da Youtube.

Per prima cosa inseriamo un link alle api di youtube, dove specificheremo che cosa selezionare (nel nostra caso andremo a prelevare tutti i video del canale di GoogleDevelopers).

<script type="text/javascript"
src="http://gdata.youtube.com/feeds/users/GoogleDevelopers/uploads?alt=json-in-script&callback=getVideos">
</script>

Questo link ci permette di selezionare tutti i feed di un determinato utente (GoogleDevelopers) esenguendo una funzione javascript di callback (getVideos).

Andiamo quindi a definire la nostra funzione nella pagina.

<script type="text/javascript">
function getVideos(data) {

}
</script>

All’interno di questa funzione filtreremo i dati e li utilizzeremo per ottenere l’output desiderato.

Per prima cosa definiamo un array per i dati ottenuti

var feed = data.feed;
var entries = feed.entry || [];

Ora possiamo estrarre i dati utilizzando un ciclo for

for (var i = 0; i < entries.length; i++) {
}

All’interno del quale ricaviamo i dati che ci servono

var entry = entries[i];
var title = entry.title.$t.substr(0, 35);
var thumbnailUrl = entries[i].media$group.media$thumbnail[0].url;
var videoUrl = entries[i].media$group.media$player[0].url;

Per gestire in maniera corretta l’output salviamo i dati relativi ai feed all’interno delle rispettive vairabili, in seguito raggruppiamo i dati con il codice html necessario all’impaginazione.

html.push('<div class="singleVideo"><a rel="prettyPhoto[flash]" href="',videoUrl,'" title="',title,'">',
'<img src="', thumbnailUrl, '"/>','</a>',
'<a rel="prettyPhoto[flash]" href="',videoUrl,'" title="',title,'"><span>',title,'...</span></a></div>');

Il risultato per ogni output del ciclo nell’html sarà:

<div class="singleVideo">
<a rel="prettyPhoto[flash]" href="[URLVIDEO]" title="[TITOLO VIDEO]">
<img src="[THUMBNAILVIDEO]"/>
</a>
<a rel="prettyPhoto[flash]" href="[URLVIDEO]" title="[TITOLO VIDEO]">
<span>[TITOLO VIDEO]...</span></a>
</div>

L’ultima riga stamperà il risultato nell’elemento con l’id specificato

document.getElementById('videoContainer').innerHTML = html.join('');

Aggiungiamo PrettyPhoto

Avendo già inserito gli attributi rel per i link non resta che aggiungere Jquery e il plugin PrettyPhoto nella pagina

<script type="text/javascript" src="javascript/jquery.js"></script>
<script type="text/javascript" src="javascript/prettyPhoto.js"></script>

ed inserire le opzioni per il desiderato funzionamento di PrettyPhoto

$(function() {
$("a[rel^='prettyPhoto']").prettyPhoto({
animationSpeed: 'normal',
padding: 40,
opacity: 0.35,
showTitle: true,
allowresize: true,
counter_separator_label: ' di ',
theme: 'light_square',
callback: function(){}
});
});

Il risultato è visibile in questa demo.

Info su Mauro Accornero

Sviluppatore e Web Designer Freelance, lavora a Milano dove collabora con Agenzie di Comunicazione ed Aziende del settore. Docente presso la Nuova Accademia di Belle Arti a Milano dove tiene corsi in ambito web per il dipartimento di Graphic Design e Art Direction.
Questa voce è stata pubblicata in Tutorial e contrassegnata con , , , , , . Contrassegna il permalink.

6 risposte a Integrare le API di Youtube con PrettyPhoto

  1. Lauryn scrive:

    sei troppo avanti. grazie dell’articolo, rimarrà fra i miei preferiti :)

    • Mauro Accornero scrive:

      Grazie Lauryn! L’integrazione è semplice ma l’effetto è carino, l’esempio è un po’ grezzo ma con qualche ritocco si ottimizza la pagina (e lo script) e diventa molto più leggero anche online.

  2. Daniele scrive:

    Ciao scusa, una curiosità:
    Sono riuscito dopo molte difficoltà ad applicare questo script; ho solo un problema:
    Il primo filmato che apro (o la prima foto) mi compaiono senza il pulsante chiudi e senza la scritta 1/23. Una volta cliccato dal secondo in poi funziona correttamente con tutti e quattro i temi..

    Comunque buon e chiaro articolo (i miei problemi sono stati relativi ad un altro script con cui doveva convivere)

    Grazue Daniele

    • Mauro Accornero scrive:

      Ciao Daniele,
      vista l’assenza del numero di immagini e dell’immagine del pulsante chiudi credo che il problema sia qualcosa su prettyphoto. Prova a verificare che la cartella delle immagini di prettyphoto sia posizionata correttamente nella root e quindi che l’immagine del pulsante “chiudi” sia collegata correttamente. Verifica anche il collegamento della pagina al css di prettyphoto. Entrambe le verifiche sono fattibili rapidamente con la web developer toolbar di firefox. Se risulta tutto corretto prova a vedere che le opzioni di prettyphoto siano impostate correttamente nelle script della pagina. Se anche qui è tutto a posto potrebbe esserci qualche problema di integrazione con altri script sulla pagina che puoi verificare con firebug.

  3. Francesco scrive:

    Ma anche nella demo ci sta il contatore di pagine che conta 50 video quando in realtà sono 25.
    Mi daresti qualche dritta per risolvere il problema?
    Io ho provato a cambiare qualcosa nel for ma senza successo
    Grazie comunque per questo fantastico tutorial.
    Ciao

  4. Mauro Accornero scrive:

    Mmm, non ho ancora provato ad inserire un paginatore per i video, però dovendo contare quanti video sono presenti direi di utilizzare “entries.length” che dovrebbe restituire il numero dei contenuti ricavati da youtube. Se ti da 50 elementi mentre sono solo 25 penso che conti ogni singola richiesta.
    Ovvero 25 sono le entry, per ognuna richiedi sia titolo che thumbnail, quindi due elementi per ogni entry fa 50. Prova ad ricavare il numero degli elementi con lenght magari utilizzandolo per contare i titoli o le thumbnail, se ho tempo faccio qualche prova e ti so dire qualcosa di più preciso.

Lascia un Commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

*

È possibile utilizzare questi tag ed attributi XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>