Guida: Un Player YouTube Personalizzato

Vuoi inserire il tuo video preferito su MySpace o sul tuo blog prendendolo da YouTube ma non sei soddisfatto del suo aspetto? Vuoi che parta da solo e magari vada in loop? Vuoi creare “un archivio” dei tuoi video preferiti?
Bene, ecco una semplice guida, vediamo come si fa.

Copiamo il codice generato da YouTube per incorporare il video nel vostro profilo MySpace.

<object width="425" height="344" data="http://www.youtube.com/v/jkeUKl8Imjk&amp;hl=en&amp;fs=1" type="application/x-shockwave-flash"><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value="http://www.youtube.com/v/jkeUKl8Imjk&amp;hl=en&amp;fs=1" /><param name="allowfullscreen" value="true" /></object>

Questo e’ il risultato:

Analizziamo le opzioni che possiamo modificare:

la linea

<object width="425" height="344" data="http://www.youtube.com/v/jkeUKl8Imjk&amp;hl=en&amp;fs=1" type="application/x-shockwave-flash">

contiene le dimensioni del filmato (larghezza 425 pixel, altezza 344 pixel), l’indirizzo del filmato (http://www.youtube.com/v/jkeUKl8Imjk, dove jkeUKl8Imjk e’ il filmato da voi scelto, in questo caso un video dei THE CRIBS). Queste due opzioni sono modificabili a vostro piacimento. fs=1 indica al player di visualizzre il pulsante “Full Screen“.

La linea

<param name="allowFullScreen" value="true" />

dice al browser che può essere aperto a tutto schermo.

La linea

<param name="src" value="http://www.youtube.com/v/jkeUKl8Imjk&amp;hl=en&amp;fs=1" />

serve per caricare il video in tutti i browser.

La linea

<embed src="http://www.youtube.com/v/jkeUKl8Imjk&hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed>

serve per caricare il video in tutti i browser. NB: tutte le modifiche che apporteremo per personalizzare il player andranno riportate anche qui.

La linea

</object>

chiude il tag aperto all’inizio.

Andiamo a cambiare i colori del player.

Prendiamo l’indirizzo del filmato

http://www.youtube.com/v/jkeUKl8Imjk&hl=en&fs=1

e andiamo ad aggiungere

http://www.youtube.com/v/jkeUKl8Imjk&hl=en&fs=1&color1=0x000000&color2=0x000000

Questa aggiunta ci permette di colorare il player di nero. “color1” e’ il colore del bordo del ns player, “color2” e’ il colore della barra di controllo del player stesso.

Per modificare i colori (in esadecimale) bisogna cambiare solo le ultime 6 cifre 0x000000.

Inserendo, ad esempio 0xffcc00 diventera’ di un bel colore dorato.

Vogliamo che il video parta da solo al momento del caricamento? Niente di piu’ facile!

Inseriamo l’opzione autoplay

http://www.youtube.com/v/jkeUKl8Imjk&hl=en&fs=1&color1=0x000000&color2=0x000000&autoplay=1

“1” indica al player di apartire automaticamente ma se la scalta non ci convince possiamo fare due cose: o eliminare questa opzione (di default il video non parte da solo) o portarla al valore “0“. Se, ad esempio, come nel mio profile MySpace volete avere un video che parta da solo e magari tenere una lista di quelli che avete gia’ messo in precedenza, l’opzione “0” fara’ molto comodo poiche’ ci bastera’ prima copiare il codice del vecchio video che avevamo e, per evitare che parta automaticamente, cambieremo il valore a “0“, potendo così creare la lista di vecchi video che partiranno solo al momento del click su “play“.

Ora, per evitare rumori molesti non sto a mettere qui il video con l’opzione autoplay attiva, ma funzionera’, garantito.

Vogliamo che la nostra canzone vada in riproduzione continua?

Aggiungiamo

http://www.youtube.com/v/jkeUKl8Imjk&hl=en&fs=1&color1=0xffcc00&color2=0xffcc00&autoplay=1&loop=1

“1” significa che il loop e’ attivato, “0” che e’ disattivato, a voi la scelta.

Provate a far andare la canzone fino in fondo, vedrete che ripartira’.

Vogliamo dare un bordo al nostro player?

Aggiungiamo

http://www.youtube.com/v/jkeUKl8Imjk&hl=en&fs=1&color1=0xffcc00&color2=0xffcc00&loop=1&border=1

il colore primario del bordo ricordiamo che viene settato con “color1”

Proviamo a farlo diventare grigio

http://www.youtube.com/v/jkeUKl8Imjk&hl=en&fs=1&color1=0xcccccc&color2=0xffcc00&loop=1&border=1

Dal lato estetico non possiamo modificare altro ma possiamo cambiare altre opzioni.

Aggiungendo

&egm=1

diciamo al player di mostrare la Enhanced Genie Menu, la funzione che ci permette, al passaggio del mouse, di vedere i video correlati.

&egm=0

la nasconde e questo e’ il valore di default. Per accedervi dovete cliccare sull’apposito tasto.

Abbiamo poi

&showsearch=1

per mostrare la barra di ricerca da poco introdotta da YouTube

&showsearch=0

al solito, la toglie (anche questo e’ il valore di default).

Ecco qui un player che suona una canzone in loop, mostra la barra di ricerca e l’ Enhanced Genie Menu, senza bordo (che reputo abbastanza brutto, ma sono gusti), con dei colori intonati a questa pagina.

Ecco il codice finale:

<object width="425" height="344" data="http://www.youtube.com/v/jkeUKl8Imjk&hl=en&fs=1&color1=0x3b5999&color2=0x3b5999&loop=1&egm=1&showsearch=1" type="application/x-shockwave-flash"><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value="http://www.youtube.com/v/jkeUKl8Imjk&hl=en&fs=1&color1=0x3b5999&color2=0x3b5999&loop=1&egm=1&showsearch=1" /><param name="allowfullscreen" value="true" /></object>

Notizie piu’ approfondite ed altri parametri possono essere studiati sulla pagina dei parametri dei player youtube.

Aggiornamento

Da pochi giorni Youtube ha aggiunto la funzionalita’ di rating per i video.
Se vogliamo toglierla dal video inserito nella nostra pagina, bisogna aggiungere

&showinfo=0

Il codice:

<object width="425" height="344" data="http://www.youtube.com/v/jkeUKl8Imjk&hl=en&fs=1&color1=0x3b5999&color2=0x3b5999&loop=1&egm=1&showsearch=1&showinfo=0" type="application/x-shockwave-flash"><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value="http://www.youtube.com/v/jkeUKl8Imjk&hl=en&fs=1&color1=0x3b5999&color2=0x3b5999&loop=1&egm=1&showsearch=1&showinfo=0" /><param name="allowfullscreen" value="true" /></object>

Il risultato: