Come personalizzare l'inserimento dei video di Youtube.

Come personalizzare la riproduzione del video e il player di Youtube creando dei CSS per configurare dimensioni e altri parametri.

Se avete un blog su Blogger potete usare il widget Barra Video per mostrare in una sidebar i video più visti o più votati relativi a un canale o a una parola chiave. Credo però che questo gadget sia poco usato visto che per i canali con un modesto numero di contatti non si visualizza praticamente nulla.

In un post precedente abbiamo visto come si possa usare il tool Demo del Player di Youtube per personalizzare tutti i parametri di visualizzazione e di riproduzione dei video di Youtube così come delle Playlist o di un elenco di video. 

IMPLEMENTARE UN VIDEO DI YOUTUBE

Per incorporare un singolo filmato di Youtube in un nostro post basta andare sotto il player e cliccare su Condividi per poi scegliere Codice da incorporare

 

Cliccando su Mostra Altro si possono configurare le dimensioni del player e altri parametri. Si dovrà poi copiare il codice che dovrà essere incollato in Modalità HTML in un post o in una pagina. 

CENTRARE UN VIDEO NEL POST O ALLINEARLO A DESTRA O SINISTRA

Per centrare il filmato basta aggiungere all'inizio del codice questa riga <div align="center"> e alla fine quest'altra riga </div>. In questo modo il video sarà visualizzato al centro del layout. Se si sostituisce center con left o right ci sarà un allineamento rispettivamente a sinistra e a destra.

 

Se volessimo inserire del testo sulla destra di un video dovremo incollare prima del suo codice questa riga <div style="float:left; margin-right:20px;"> mentre alla fine si dovrà inserire </div>.

Dove il tag margin-right:20px; serve per separare di 20 pixel il video dal resto del contenuto. Se fermo restando il tag posto alla fine </div>,  all'inizio del codice inseriamo invece la riga <div style="float:right; margin-left:20px;"> si visualizzerà il video sulla destra del contenuto

 

 

CREARE UNA CLASSE PER I VIDEO DI YOUTUBE

Come abbiamo visto nel post linkato all'inizio dell'articolo Youtube ci permette di usare diversi parametri per personalizzare la visualizzazione dei nostri filmati. Si può anche creare una classe per richiamarne alcuni e magari creare più classi quando vogliamo richiamare più di una configurazione. Per esempio possiamo creare un foglio di stile per i video larghi 560 pixel con rapporto 16:9 per lo screen e un altro CSS per i video con rapporto 4:3 e larghezza 480 pixel. 

Consideriamo per esempio questo codice

<div align="center">
<div class="Youtube_player" id="IpCeI_Youtube_player"></div>
</div>
<script>
  var       autoplay = 0;        /* 0 (default) o 1 */
  var            rel = 1;        /* 0 o 1 (default) */
  var       showinfo = 1;        /* 0 o 1 (default) */
  var           loop = 1;        /* 0 (default) o 1 */
  var        control = 1;        /* 0 o 1 (default) */
  var iv_load_policy = 1;        /* 1 (default) o 3 */
  var          theme = "dark";   /* "dark" (default) o "light" */
  var          color = "red";    /* "red" (default) o "white" */
  var widgetBC = document.getElementById('IpCeI_Youtube_player');
  var containerWidth;
  if (widgetBC.offsetWidth) { containerWidth = widgetBC.offsetWidth; }
  var containerHeight = (containerWidth/16)*9;
  var src = "https://www.youtube.com/embed/yymd-GmyB-s?rel="+rel+"&amp;iv_load_policy="+iv_load_policy+"&amp;autoplay="+autoplay+"&amp;showinfo="+showinfo+"&amp;loop="+loop+"&amp;color="+color+"&amp;controls="+control+"&amp;theme="+theme+"&amp;wmode=opaque";
  var player = document.createElement('iframe');
      player.setAttribute('src', src);
      player.setAttribute('allowtransparency', 'true');
      player.setAttribute('scrolling', 'no');
      player.setAttribute('frameborder', '0');
      player.setAttribute('width', containerWidth);
      player.setAttribute('height', containerHeight);
  document.getElementById('IpCeI_Youtube_player').appendChild(player);
</script>

Se lo incolliamo in un post prenderà tutta l'area disponibile visto che non sono presenti larghezza e altezza. Il video mostrato sarà quello con ID yymd-GmyB-s che ovviamente potrà essere cambiato a piacere. I parametri da configurare sono i seguenti:

1. autoplay per iniziare la riproduzione automaticamente con 1
2. rel per mostrare o meno i video correlati con 1
3. showinfo per mostrare o meno il titolo del video con 1
4. loop per la ripetizione automatica o meno della riproduzione con 1
5. control per mostrare o meno i comandi del player con 1
6. iv_load_policy per attivare la privacy che non traccia le statistiche con 3
7. theme per un tema dark o light
8. color per il colore della barra di progressione red o white
9. (containerWidth/16)*9; per un rapporto 16:9 dello schermo al posto di 4:3

Un foglio di stile adeguato per il player di Youtube potrebbe essere questo

<style>
.Youtube_player {width:560px; height:365px; margin-top:20px; margin-bottom:20px;}</style>

in cui il CSS è quello della riga centrale che configura il player di dimensioni di 560 pixel di larghezza e 365 pixel di altezza oltre che inserire dei margini di 20 pixel nella parte alta e bassa del video. Questo codice lo possiamo incollare prima del precedente per visualizzare il video nel post con quelle caratteristiche oppure possiamo incollare nel modello di Blogger sopra alla riga ]]></b:skin> solo la riga evidenziata di giallo.   In questo modo tutte le volte che utilizzeremo la classe Youtube_player il video sarà mostrato di quelle dimensioni. Possiamo anche inserire per esempio la classe Youtube_player_1 che abbia delle caratteristiche diverse da quelle precedenti.

Nel caso in cui si voglia postare una playlist il codice potrebbe diventare così 

<style>
.Youtube_player_1 {width:560px; height:365px; margin-top:20px; margin-bottom:20px;}
</style>
<div align="center">
<div class="Youtube_player_1" id="IpCeI_Youtube_player_1"></div>
</div>
<script>
  var       autoplay = 0;        /* 0 (default) o 1 */
  var            rel = 1;        /* 0 o 1 (default) */
  var       showinfo = 1;        /* 0 o 1 (default) */
  var           loop = 1;        /* 0 (default) o 1 */
  var        control = 1;        /* 0 o 1 (default) */
  var iv_load_policy = 1;        /* 1 (default) o 3 */
  var          theme = "dark";   /* "dark" (default) o "light" */
  var          color = "red";    /* "red" (default) o "white" */
  var widgetBC = document.getElementById('IpCeI_Youtube_player_1');
  var containerWidth;
  if (widgetBC.offsetWidth) { containerWidth = widgetBC.offsetWidth; }
  var containerHeight = (containerWidth/16)*9;
  var src = "https://www.youtube.com/embed/videoseries?list=PL0ZujtWGmemouWPIgt_ewKdIqpg4lFl_8&amp;rel="+rel+"&amp;iv_load_policy="+iv_load_policy+"&amp;autoplay="+autoplay+"&amp;showinfo="+showinfo+"&amp;loop="+loop+"&amp;color="+color+"&amp;controls="+control+"&amp;theme="+theme+"&amp;wmode=opaque";
  var player = document.createElement('iframe');
      player.setAttribute('src', src);
      player.setAttribute('allowtransparency', 'true');
      player.setAttribute('scrolling', 'no');
      player.setAttribute('frameborder', '0');
      player.setAttribute('width', containerWidth);
      player.setAttribute('height', containerHeight);
  document.getElementById('IpCeI_Youtube_player_1').appendChild(player);
</script>

con i parametri che hanno lo stesso significato e in cui l'ID della playlist è colorato di viola. Concludo ricordando che l'ID di un video o di una playlist si può ricavare dall'indirizzo della pagina visualizzato nella barra del browser estraendo la stringa alfanumerica dopo v= o dopo list=.