Pubblicato il 17/06/11 - aggiornato il  | 9 commenti :

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


codice incorporare video youtube

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

incorporare video youtube

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.


9 commenti :

  1. Ciao ernesto,fino a uno o due anni fá si poteva aggiungere il video nel blog con la cornice video con colori a piacere, da qualche tempo non più, sono rimasta molto delusa su questo cambiamento negativo da parte di YouTube. Ho letto questo tuo post e ho visto che a parte tutte le altre cose essenziali, tu nomini anche il colore, per chi lo volesse aggiungere, ma mi deve essere sfuggata qualcosa. Ho capito che ci vuole un codice colore esadecimali, solo che nn ho capito dove lo devo aggiungere, perché nel codice non nomina il colore del bord. Potresti essere così gentile da darmi questa informazione? credo che servirá a molti, visto che ho letto delle delusioni anche da altri a riguardo. Grazie in anticipo. Buone cose.

    RispondiElimina
  2. @Un Tocco di Rosa
    Ho provato a inserire i parametri dei bordi e dei colori ma non funzionano né con il vecchio né con il nuovo codice

    RispondiElimina
  3. Ti ringrazio Ernesto, allora vuol dire che youTube li ha eliminati del tutto. Peccato!Ciao

    RispondiElimina
  4. sono delusa anche io... mi piaceva personalizzare il bordo dei video a seconda della pagina web in cui li inserivo...

    RispondiElimina
  5. @soleyada
    La personalizzazione nelle API c'è però non funziona. Può darsi che non l'abbia capita bene :), mi sembra strano però ...
    Se vengo a sapere qualcosa di nuovo ci faccio un altro post.

    RispondiElimina
  6. Adesso compare uno spazio con scritto pubblicità (da ieri mi sembra). Si può togliere?

    RispondiElimina
  7. @Stefano
    Youtube si riserva il diritto di inserire della pubblicità nella parte bassa del layout. Si può togliere cliccando nella crocetta sulla destra ma non si può disabilitare.

    RispondiElimina
  8. Come fare per far partire il video con l'audio subito attivo? Grazie

    RispondiElimina
    Risposte
    1. Si può far partire il video in automatico e quindi anche l'audio con la stringa
      &autoplay=1
      ma questo c'era già scritto nell'articolo
      @#

      Elimina

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