Come creare una galleria di video di Youtube per Blogger.

Probabilmente saprete che è possibile non solo incorporare un video di Youtube in un post del blog ma anche inserire una intera Playlist di video. Occorre per prima cosa creare la playlist con i filmati che ci piacciono e poi implementarne il codice. Vediamo come sia possibile inserire nel blog una galleria di video attraverso un elemento HTML. Questo gadget potrà poi essere mostrato in tutto il blog o solo in determinate pagine attraverso i tag condizionali. Sfrutteremo inoltre una proprietà di Youtube molto nota agli sviluppatori ma non altrettanto ai semplici blogger riguardo alle miniature dei video. Ci appoggeremo anche sulle librerie Google API che danno la possibilità di ottenere codice open source. Ricordo a questo proposito che derivano da lì anche gli effetti Scriptaculous e Prototype; in questo articolo sarà invece utilizzato lo script SWF Object.

Ogni video di Youtube ha un URL che è determinato dal nome del dominio e da un ID che lo identifica in modo univoco

Per ciascun video, Youtube fornisce due miniature in modo automatico. Per esempio il video con ID Z1Ls2VpIVGQ ha le miniature

http://img.youtube.com/vi/Z1Ls2VpIVGQ/1.jpg e

http://img.youtube.com/vi/Z1Ls2VpIVGQ/0.jpg

La prima ha dimensioni 120x90 pixel mentre la seconda 480x360 pixel. Per ottenerle basta creare un URL con l'ID del video e i numeri 0 e 1 attraverso la sintassi precedente. Vogliamo arrivare a una galleria di video in cui siano visibili le miniature di dimensione più piccola in modo tale da riprodurre ciascuno di essi mediante un semplice click del mouse

Le miniature si vedranno in orizzontale sopra e sotto al player. Come è mia abitudine ho postato in rete una

• Demo della Galleria di Video di Youtube -

Per l'installazione andate su Design > Modifica HTML e cercate la riga </head>. Immediatamente sopra incollate questo codice

<!--Galleria di video Youtube-->
<script src='http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js' type='text/javascript'/><link href='https://sites.google.com/site/scriptperilblog/javascript-2/youtubeCSS.css' media='screen' rel='stylesheet' type='text/css'/>
<!--Galleria di video Youtube - www.ideepercomputeredinternet.com-->

Salvate il modello. Se non volete inutilmente appesantire di javascript il vostro blog e avete intenzione di visualizzare la galleria solo in un post o in una pagina statica, potete inserire il precedente codice tra queste due righe

<b:if cond='data:blog.url == "URL DELLA GALLERIA"'>   

Codice da incollare sopra a </head>

</b:if>

Andate adesso su Design > Aggiungi un gadget > HTML/Javascript e incollate il seguente codice

<div id="VideoGallery">.</div>
<div id="VideoGallery1">
<a href="javascript:IPCEIvidfun('IdVideo1');"><img src="http://img.youtube.com/vi/IdVideo1/1.jpg" /></a>
<a href="javascript:IPCEIvidfun('IdVideo2');"><img src="http://img.youtube.com/vi/IdVideo2/1.jpg" /></a>
<a href="javascript:IPCEIvidfun('IdVideo3');"><img src="http://img.youtube.com/vi/IdVideo3/1.jpg" /></a>
<a href="javascript:IPCEIvidfun('IdVideo4');"><img src="http://img.youtube.com/vi/IdVideo4/1.jpg" /></a>
<a href="javascript:IPCEIvidfun('IdVideo5');"><img src="http://img.youtube.com/vi/IdVideo5/1.jpg" /></a>
</div>
<div id="VideoGallery2">Loading ...</div><script type="text/javascript">swfobject.embedSWF(
'http://www.youtube.com/v/IdVideoInizio&enablejsapi=1&rel=0&fs=1',
'VideoGallery2',
'400','344', '8',null,null,
{allowScriptAccess: 'always',allowFullScreen: 'true'},
{id: 'VideoPlay'}); function IPCEIvidfun(id) {
var o = document.getElementById( 'VideoPlay' );
if( o ) {o.loadVideoById( id );} } </script>
<div id="VideoGallery">.</div>
<div id="VideoGallery1">
<a href="javascript:IPCEIvidfun('IdVideo6');"><img src="http://img.youtube.com/vi/IdVideo6/1.jpg" /></a>
<a href="javascript:IPCEIvidfun('IdVideo7');"><img src="http://img.youtube.com/vi/IdVideo7/1.jpg" /></a>
<a href="javascript:IPCEIvidfun('IdVideo8');"><img src="http://img.youtube.com/vi/IdVideo8/1.jpg" /></a>
<a href="javascript:IPCEIvidfun('IdVideo9');"><img src="http://img.youtube.com/vi/IdVideo9/1.jpg" /></a>
<a href="javascript:IPCEIvidfun('IdVideo10');"><img src="http://img.youtube.com/vi/IdVideo10/1.jpg" /></a>
</div>

in cui avrete inserito l'ID dei video che volete visualizzare nella galleria al posto di IdVideoX. Ne ho messi dieci ma se ne possono inserire anche di più o di meno. Al posto di IdVideoInizio si mette l'ID del video che vogliamo si visualizzi nel player all'atto dell'apertura della pagina e lo sceglieremo tra quelli che abbiamo proposto. Si salva l'elemento e si posiziona in una sidebar o sotto l'header. Come detto può anche essere posizionato in una pagina statica ma sempre mediante Design > Aggiungi un gadget HTML/Javascript. Dovremo solo aggiungere la condizione che detto widget sia visibile solo in quella pagina. Si clicca su Salva e si visualizza il risultato. La sintassi per inserire altri video è la seguente

<a href="javascript:IPCEIvidfun('IdVideoX');"><img src="http://img.youtube.com/vi/IdVideoX/1.jpg" /></a>

Opzioni ulteriori

Se volete rendere la galleria più carina, potete scaricare il file CSS che ne determina l'aspetto e cambiare le immagini di sfondo con altre più belle o  più confacenti al vostro layout. Le immagini dovranno essere caricate su un hosting come Picasa o Skydrive e il loro indirizzo sostituito nel file CSS. Ricordo che quest'ultimo dovrà essere caricato su Google Sites o DropBox, se ne dovrà acquisire l'URL che si dovrà sostituire a quello presente nel codice inserito nel template. Consiglio di fare queste modifiche con l'ottimo editor Notepad++.