Pubblicato il 11/05/15e aggiornato il

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
 
video-youtube

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

filmato-sinistra-testo

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
 
filmato-youtube

 

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




4 commenti :

  1. Ciao Ernesto, ti scrivo su questo post anche se l'argomento non è pertinente ma sono certa che tu possa aiutarmi e non ho trovato un post più attinente... Scusami!
    Da qualche giorno non riesco più a visualizzare il contenuto della scheda "Layout" di blogger, si carica solo il widget della favicon e non tutti gli altri... La cosa si verifica con Chrome, Firefox, Opera e (sì, sono disperata) anche con I.E. Hai qualche suggerimento da darmi per capire che succede? Ho abilitato sul browser l'apertura dei pop up come qualcuno suggeriva in rete ma nulla... il problema persiste....
    Spero tu possa darmi una mano :)

    Federica

    RispondiElimina
    Risposte
    1. La situazione è complessa. Delle volte capita che non si apra il Modello ma la scheda Layout non lo avevo mai sentito. Ultimamente hai fatto il redirect a un nuovo dominio? Hai installato un nuovo widget? Il problema dovrebbe essere quello. Però se non riesci a entrare in Layout lo puoi disinstallare solo da modello. Mi spiace non esserti più utile di così :(
      @#

      Elimina
    2. Se non risolvi potresti provare a salvare il template e a caricare un modello vecchio per vedere se le cose tornano a posto
      @#

      Elimina
    3. scoperto l'arcano (almeno credo, ma sembra funzionare)!
      seguendo un tuo post ho fatto si che gli utenti non loggati non vedano il blog ma solo un immagine con il logo e un "coming soon" (si tratta di un nuovo blog che lancerò tra un po'!), ora ho provato a togliere quei codici è finalmente rivedo il layout, forse per qualche motivo non sono compatibili con il tema...! Grazie grazie grazie comunque per la tua risposta, sei sempre gentilissimo! :)

      Fede

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.