Come personalizzare un video di Youtube incorporato in un blog.

Come incorporare i video di Youtube in modo personalizzato modificando l'URL dello stesso video o utilizzando la Demo del Player di Youtube.

Incorporare i video di Youtube negli articoli del blog è una pratica diffusissima tanto che sembrerebbe superfluo scriverci un articolo. Lo stesso servizio di video-sharing offre diverse opzioni di configurazione direttamente sul sito. Non tutti conoscono però conoscono i parametri forniti dalle API di Youtube. 

Ma andiamo per gradi. Per inserire un video di Youtube nel blog occorre cliccare su Condividi sotto il player

L'URL del link, evidenziato di blu nello screenshot, è sufficiente se si vuole postare il video mediante Windows Live Writer, se invece si clicca su Codice da incorporare si possono scegliere varie opzioni di implementazione

Di default viene mostrato il codice da selezionare e copiare sotto forma di iFrame, evidenziato di giallo nello screenshot, ma sono presenti altre opzioni di configurazione che vado a illustrare

1. Si può personalizzare la dimensione del player scegliendo una delle opzioni già predisposte oppure inserendo i valori in pixel di larghezza e altezza. Non si può andare sotto i 200 pixel di larghezza anche se si può comunque modificare manualmente il codice.
2. Mettendo la spunta a Mostra i video suggeriti … , verranno mostrati i video correlati alla fine della riproduzione. In termini di codice significa aggiungere la stringa rel=0
3. La flag su Usa HTTPS serve per una connessione protetta HTTPS e in sostanza aggiunge solo una s alla parte inziale dell'URL
4. Riproduci in HD indica l'opzione per questo tipo di riproduzione quando il video la consente
5. Abilita modalità di privacy avanzata consente di limitare l'uso dei cookie che utilizza Youtube per acquisire le statistiche di visualizzazione dei video. Questa opzione funziona solo con il codice basato su object (vedi punto seguente)
6. Se si mette la spunta a Usa vecchio codice di incorporamento al posto dell'iFrame sarà mostrato un codice basato sui tag <object> e <embed>. L'URL del video in questo tipo codice viene inserito due volte così come gli altri parametri.

Ulteriori informazioni sulla procedura di implementazione dei video possono essere consultate nella Guida di Youtube. Se vogliamo andare oltre a queste funzionalità offerte direttamente dal sito dobbiamo usare i parametri delle API di Youtube. Vediamo i più importanti

fs abilita la visione a tutto schermo del video. Per inserirlo occorre aggiungere ?fs=1 all'URL del video in questo modo

http://www.youtube.com/embed/XYZT?fs=1 nel caso dell'iFRame
http://www.youtube.com/v/XYZT?fs=1     se si usa il vecchio codice di incorporamento

Tutti gli altri parametri si aggiungono usando & al posto di ?. fs=0 impedisce il fullscreen (di default) mentre fs=1 lo consente.

Come detto nel punto 2) il codice rel=0 non mostra i video correlati alla fine della riproduzione. Il codice in questo caso diventerebbe

http://www.youtube.com/embed/XYZT?fs=1&rel=0 nel caso dell'iFRame
http://www.youtube.com/v/XYZT?fs=1&rel=0     se si usa il vecchio codice di incorporamento

rel=1 mostra invece i video suggeriti ed è la impostazione di default. Tutti gli altri parametri si aggiungono all'URL con lo stesso metodo cioè attraverso &

http://www.youtube.com/embed/XYZT?fs=1&rel=0&autoplay=1  nel caso dell'iFRame
http://www.youtube.com/v/XYZT?fs=1&rel=0&autoplay=1      se si usa il vecchio codice di incorporamento

autoplay=1 fa riprodurre il video automaticamente, per default è autoplay=0. Ecco un breve elenco degli altri parametri che si possono aggiungere

1. border=1 mostra il bordo intorno al player. Di default è border=0
2. color1, color2 sono i colori di primo piano ed di background del bordo. Si devono inserire dei codici dei colori esadecimali
3. hd=1 mostra i video in alta definizione. Di default è hd=0
4. loop=1 per far riprodurre il video (o la playlist) di continuo. Di default è loop=0
5. modestbranding=1 per non visualizzare il logo di Youtube. Di default è modestbranding=0
6. showinfo=0 per non mostrare il titolo del video. Di default è showinfo=1
7. iv_load_policy=3 per nascondere le annotazioni. Di default è iv_load_policy=1. Utile per quei video pieni di note.
8. cc_load_policy=1 mostra i sottotitoli come impostazione. Di default è cc_load_policy=0
9. version=3 serve per la nuova versione del riproduttore che aggiunge nuove opzioni al menù contestuale quando si clicca con il destro del mouse sul player del video che si sta visualizzando
10. start=X consente di inserire un intero positivo che determinerà il numero di secondi da cui inizierà la riproduzione

Aggiornamento: Per facilitare la implementazione dei video è stato creata una pagina con un Demo del Player di Youtube in modo da farlo anche senza conoscere i linguaggi di programmazione.