Galleria di video con effetto Coda Slider.

Vediamo come sia possibile creare una piccola galleria di sette video da inserire in un elemento pagina del blog o in una pagina statica. Si utilizza lo script Coda Slider e si utilizzano le API di Youtube che permettono di ricavare l'URL della miniatura a partire dall'ID del video. Ricordo che l'ID di un video di Youtube si può acquisire direttamente dall'indirizzo del browser, quando viene aperto, o anche cliccando su Condividi e selezionandone la parte finale dopo la slash

Youtube da due miniature, una grande con questo indirizzo

http://img.youtube.com/vi/ID-VIDEO/0.jpg

e una più piccola che ha quest'altro URL

http://img.youtube.com/vi/ID-VIDEO/1.jpg

dove si devono inserire gli ID dei rispettivi video. L'idea di questa galleria è quella di associare le miniature più piccole ai rispettivi video

• Demo della Galleria video Coda Slider -

Cliccando su una miniatura posta in basso si visualizzerà il video collegato con un effetto slide. Passiamo alla sua installazione . Dopo aver salvato come al solito il modello completo per un backup di sicurezza, si va su Modello > Modifica HTML > Procedi e si cerca la riga </head>. Immediatamente sopra si incolla questo codice comprensivo di javascript e di CSS 

• Galleria di video con effetto Coda Slider (CSS e Javascript) -

Le dimensioni sono state calcolate per avere sette video sotto il player. Si possono variare larghezza e altezza che sono accompagnate da dei commenti colorati di verde ma occorre ricordarsi che tutte le distanze sono legate le une alle altre. L'URL della immagine di sfondo può essere sostituito da un'altra immagine di diverso colore e di diverse dimensioni ricordandosi però di cambiare tutti i valori in modo coerente. Si salva il modello.

Adesso dobbiamo trovare gli ID dei video con la procedura illustrata prima che dovranno essere incollati in quest'altro codice

• HTML dell'elemento pagina -

Ciascun ID dovrà essere inserito due volte, una per il video e una per la miniatura. Tale codice va incollato su Layout > Aggiungi un gadget > HTML/Javascript in Sezioni del sito, salvato e posizionato con il mouse.

Osservazione conclusiva

Se avete un blog con un dominio personalizzato nel senso che avete acquistato da Google il sito e non avete più blogspot nell'URL, allora è probabile che questa galleria non funzioni. Gli script caricati su Google Sites sembra infatti che funzionano solo sui blog con URL del tipo nomeblog.blogspot.com. In questo caso nel primo codice che si riferisce al CSS e al javascript della galleria, scaricate i tre file javascript incollando gli URL colorati di blu nella barra del browser. Caricateli su un servizio quale DropBox o SugarSync, acquisitene l'URL diretto e sostituitelo a quello dei file che avete scaricato nel blocco colorato di viola.