Pubblicato il 14/02/11 - aggiornato il  | 20 commenti :

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

id dei video di youtube

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

galleria di video di youtube

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

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++.





20 commenti :

  1. non c'è nulla del genere per le foto con link che rimandano ad articoli?

    RispondiElimina
  2. @Soffio di Dea
    C'è questo widget orizzontale in slideshow semplice e carino
    http://www.ideepercomputeredinternet.com/2011/02/widget-di-uno-slideshow-orizzontale-con.html

    RispondiElimina
  3. Si questo volevo metterlo nelle pagine dei post... :) (ti ho scritto dal profilo che non uso quasi mai prima) :) grazie

    RispondiElimina
  4. ciao,il mio non è un commento al post,perchè per me è ancora troooooppo difficile fare queste cose,volevo chiederti come posso fare a mettere in un unico gadget orizzontale tutti i piccoli banner,ad esempio come il tuo"idee per computer"ecc,ecc.so che lo avevi fatto un post,ma non lo trovo più.Resto in attesa,grazie,Giulia

    RispondiElimina
  5. @la civetta dispettosa
    Se vuoi mettere i banner in fila orizzontale puoi semplicemente copiare e incollare i codici uno di seguito all'altro. Per evitare che vengano attaccati puoi inserire uno o più spazi mettendo questo simbolo
     
    tra un codice e un altro o anche più di uno. Quando vuoi andare a capo e passare a un altra linea devi inserire il tag
    < br/ >
    dove devi togliere gli spazi accanto ai segni di minore e maggiore.

    RispondiElimina
  6. grazie mille,vado e provo a metterli attaccati,nella tua risposta non si vede il simbolo per non farli risultare uniti.Ciao,Giulia

    RispondiElimina
  7. @stregaluna
    La distanza tra le miniature è di 2px. Se vuoi personalizzare ulteriormente il widget scaricati questo file
    https://sites.google.com/site/scriptperilblog/javascript-2/youtubeCSS.css
    e modificalo a piacimento. Ciao

    RispondiElimina
  8. Se metto il codice direttamente nella pagina funziona lo stesso, ma mi mette i video in verticale anziché in orizzontale... Non c'è il modo di intervenire sul codice direttamente?

    RispondiElimina
  9. Come non detto: è bastato eliminare gli a capo tra i vari "a".

    Sarebbe ottimo però se si potesse inserire il titolo accanto ad ogni video. Ora provo a vedere se ci riesco. Comunque confermo che si può inserire il secondo blocco di codice direttamente nella pagina statica invece che usare il gadget (se si usa il tag condizionale per vederlo solo in quella pagina, ovviamente).

    RispondiElimina
  10. Ciao, intanto complimenti per l'ottimo lavoro in generale. Per lo specifico di questo articolo, è possibile fare la stessa cosa ma invece di video youtube, utilizzare presentazioni di flickr visto che le presentazioni hanno un link proprio???
    Grazie

    RispondiElimina
  11. Sovrapponendo il cursore del mouse sulle miniature
    è possibile far visualizzare a mo di tooltip o simile
    il titolo del video originale
    o al limite
    un testo generico di descrizione inserito manualmente ?

    RispondiElimina
    Risposte
    1. @# Credo di sì. Magari testa da solo questa modifica perché non ho tempo di farlo. Per ogni miniatura con questo codice
      img src="http://img.youtube.com/vi/IdVideo1/1.jpg"
      inserisci un tag title in questo modo
      img src="http://img.youtube.com/vi/IdVideo1/1.jpg" title="Titolo del video"
      Dovrebbe funzionare e dovrebbe mostrare il tooltip con il titolo del video quando si passa con il cursore sopra la miniatura.

      Elimina
    2. Grazie a te
      è stato aggiunto
      un'altro granello di sabbia di sapienza.

      RISOLTO!
      Mi piace marcare con questa parola
      perchè viene spesso usato nei forum di linux.

      Ma...
      incontentabilmente desideroso di sapere
      e di passeggiare in una spiaggia di infiniti granelli,
      esiste un slideshow dedicato ai video youtube ?

      Ciao Ernesto.

      Elimina
    3. @# Non mi viene in mente niente su slideshow di video di Youtube

      Elimina
  12. Ciao, ma è possibile inserire in verticale una playlist solo con le miniature? sto cercando di capirci qualcosa ma non so come fare..

    RispondiElimina
    Risposte
    1. Si può creare una galleria con le miniature seguendo le istruzioni di questo post e di quest'altro
      http://www.ideepercomputeredinternet.com/2010/03/galleria-foto-windows-live-writer.html
      Se vuoi mettere per esempio 8 miniature in verticale crei una galleria da 8 righe e 1 colonna. Come miniature metti quelle canoniche dei video per poi mettere il loro link
      @#

      Elimina
  13. il problema è che se inserisco questo codice si sballa la home perchè nella barra il video grande non va..inserendo solo il codice con le minature non funziona..cioè si vede l'immagine ma cliccandoci su non rimanda a niente..
    a me piacerebbe avere delle miniature che poi portano su you tube..
    come posso fare?

    RispondiElimina
    Risposte
    1. @# Arguisco che non sai mettere un link a una immagine. Ti consiglio di scaricare il mio ebook gratuito "Guida all'HTML e al CSS"
      http://www.ideepercomputeredinternet.com/2012/09/guida-html-ebook.html

      Per mettere un link a una miniatura di un video di Youtube si usa questo codice

      <a href="http://www.youtube.com/watch?v=yymd-GmyB-s"><img src="http://img.youtube.com/vi/yymd-GmyB-s/1.jpg" /></a>
      per unaminiatura da 120x90 e quest'altro
      <a href="http://www.youtube.com/watch?v=yymd-GmyB-s"><img src="http://img.youtube.com/vi/yymd-GmyB-s/0.jpg" /></a>
      per una minaitura più grande. Come esempio ho usato un mio video. Devi solo cambiare l'ID del video


      Elimina
  14. Non l'ho scaricato ma ho risolto..capivo male le istruzioni di questo articolo e lasciavo <a href="javascript:IPCEIvidfun prima del link.

    Tnx!

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy