Come incorporare un video YouTube responsive in un sito web

Difficoltà:    

Chiunque si sia ritrovato a dover incorporare un video YouTube (o ancora peggio, molti video YouTube) in una qualsiasi pagina web sa bene quanto quest’operazione all’apparenza semplice possa vanificare in un secondo tutti i nostri sforzi di edificare una user experience ottimale. Scopriamo perché.

Il metodo “classico” (quello ufficialmente fornito da YouTube) per incorporare un video è l’utilizzo del tag iframe.
Il codice che tutti conosciamo appare più o meno così:

<iframe src="https://www.youtube.com/embed/ilAJJ3WHg6g" width="420" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

Per quanto sia breve e facile da includere, sareste sorpresi di scoprire quante risorse extra vengono caricate per ogni singolo video incorporato tramite questo metodo: tra immagini, CSS e javascript necessari per il rendering del player di YouTube la pagina web deve scaricare più o meno 400 kb di dati ancora prima che l’utente abbia modo di arrivare al video – senza contare che potrebbe anche decidere di non guardarlo affatto.

Ciò si traduce in un inevitabile dilatamento del tempo di caricamento della pagina, soprattutto nel momento in cui si presenta la necessità di dover caricare più di un video o addirittura una gallery di video. Ed è risaputo che un’attesa superiore a un secondo spesso porta gli utenti ad abbandonare la pagina prima ancora di averne visualizzato i contenuti.

La schermata del tool di Pingdom è più che mai eloquente a riguardo:

Youtube pingdom

File e risorse richiamati dall’incorporamento tramite iframe

Un altro enorme problema generato da questo tipo di incorporamento consiste nel fatto che il video caricato tramite tag iframe non è mobile friendly, in quanto il player non si adatterà alle dimensioni dello schermo dell’utente avendo un’altezza e una larghezza fisse, dichiarate nello stesso tag iframe.
Avete mai provato a ridimensionare la finestra del browser dopo aver incluso un video YouTube con questo codice?
Vi accorgereste ben presto di quanto sia frustrante non poter guardare un video dallo smartphone e vedere sconvolto il design della pagina.

Va da sé che questi due problemi sono indiscutibilmente critici a livello di user experience e possono davvero portare ad un aumento vertiginoso del bounce rate.
Fortunatamente esiste un metodo decisamente più efficace di incorporare video da YouTube, ideato da Amit Agarwal di Google: caricandoli in modo asincrono soltanto qualora l’utente decidesse di cliccare il tasto play e rendendo il player totalmente responsive grazie a qualche riga di CSS e javascript.
Vediamo come fare.

Come caricare un video YouTube in modo più efficiente

Avrete sicuramente notato che in alcuni siti web e social network (Google+ in primis) i video YouTube si presentano all’utente in maniera leggermente diversa: si tratta di un workaround che consente di evitare l’embed diretto (con il conseguente caricamento di risorse inutili) e caricare invece soltanto un’immagine fissa che funga da anteprima del video. L’icona del tasto “play” sopra di essa la fa apparire in tutto e per tutto come un player, e cliccandoci sopra viene effettivamente caricato il video desiderato.

Eccone un esempio:

(la scelta del video è stata accuratamente studiata per prolungare il vostro tempo di permanenza su questa pagina)

Il codice per raggiungere questo risultato è leggermente diverso da quello classico: il video viene richiamato all’interno di un div responsive che renderà il player mobile friendly e l’iframe verrà caricato solamente nel momento in cui l’utente cliccherà sul tasto play.

1. Codice da incorporare – HTML

Il codice HTML da incollare nel punto della pagina in cui desiderate far apparire il video è il seguente:

<div class="youtube-container">
   <div class="youtube-player" data-id="VIDEOID"></div>
</div>

Dove al posto di “VIDEOID” andrà inserito l’ID del video che volete caricare. Per ottenerlo è sufficiente dare un’occhiata all’URL del video: l’id è il codice alfanumerico che viene immediatamente dopo watch?v=.

Come vedete nel codice non sono stabilite una larghezza ed un’altezza fissa, in quanto verranno calcolate automaticamente da CSS e JS.

2. Javascript

Il codice javascript va inserito subito prima della chiusura del body della pagina.
La funzione scannerizzerà l’intero contenuto della pagina alla ricerca di codici embed per video YouTube e aggiungerà in automatico l’immagine di anteprima e l’evento onclick che farà effettivamente apparire il vero video in modalità autoplay.

<script>
(function() {
    var v = document.getElementsByClassName("youtube-player");
    for (var n = 0; n < v.length; n++) {
        var p = document.createElement("div");
        p.innerHTML = labnolThumb(v[n].dataset.id);
        p.onclick = labnolIframe;
        v[n].appendChild(p);
    }
})();
 
function labnolThumb(id) {
    return '<img class="youtube-thumb" src="//i.ytimg.com/vi/' + id + '/hqdefault.jpg"><div class="play-button"></div>';
}
 
function labnolIframe() {
    var iframe = document.createElement("iframe");
    iframe.setAttribute("src", "//www.youtube.com/embed/" + this.parentNode.dataset.id + "?autoplay=1&autohide=2&border=0&wmode=opaque&enablejsapi=1&controls=0&showinfo=0");
    iframe.setAttribute("frameborder", "0");
    iframe.setAttribute("id", "youtube-iframe");
    this.parentNode.replaceChild(iframe, this);
}
</script>

3. CSS

L’ultimo step per raggiungere il risultato desiderato è includere il CSS che renderà immagine e video perfettamente adattabili alla larghezza della pagina, oltre a far apparire il pulsante “play” sopra l’immagine di anteprima.
Inseritelo nel vostro foglio di stile, oppure inline utilizzando il tag style.

.youtube-container { 
display: block; 
margin: 20px auto; 
width: 100%; 
max-width: 600px; 
}

.youtube-player { 
display: block; 
width: 100%; /* assuming that the video has a 16:9 ratio */ 
padding-bottom: 56.25%; 
overflow: hidden; 
position: relative; 
width: 100%; 
height: 100%; 
cursor: hand; 
cursor: pointer; 
display: block; 
}

img.youtube-thumb { 
bottom: 0; 
display: block; 
left: 0; 
margin: auto; 
max-width: 100%; 
width: 100%; 
position: absolute; 
right: 0; 
top: 0; 
height: auto 
}

div.play-button { 
height: 72px; 
width: 72px; 
left: 50%; 
top: 50%; 
margin-left: -36px; 
margin-top: -36px; 
position: absolute; 
background: url("http://i.imgur.com/TxzC70f.png") no-repeat; 
}

#youtube-iframe { 
width: 100%; 
height: 100%; 
position: absolute; 
top: 0; 
left: 0; 
}

Et voilà! Attraverso questi tre step potrete includere il numero di video YouTube che desiderate, caricando solamente una leggerissima immagine di anteprima che non comprometterà la velocità di caricamento della pagina.
Sia l’immagine che l’iframe caricato dopo il click saranno totalmente responsive.

Come usare questo metodo di incorporamento su WordPress

Per chi utilizza WordPress e ha necessità di incorporare un video YouTube in una pagina o un articolo quest’operazione potrebbe apparire più ostica, a causa della difficoltà di base nell’includere script nel footer di WordPress.

Fortunatamente esiste un plugin che permette di ovviare al problema: OH Add Script Header Footer, concepito appositamente per creare un metodo veloce e immediato di aggiungere del codice javascript solamente alla pagina o al post desiderati.
Una volta installato e attivato, basterà aprire l’editor di WordPress sull’articolo che ci interessa e scrollare fino in fondo alla pagina, dove troverete una scheda come questa:
aggiungere script
Incollate lo script nella sezione footer, non dimenticando di includere i tag script, ed il gioco è fatto.
In questo modo eviterete inoltre di dover caricare il javascript in tutte le pagine del sito, limitandolo soltanto a quelle che contengono un video YouTube.

Di Susanna Marsiglia

Blogger, content manager, SEO, web designer, a volte scrittrice analogica. Nerd repressa causa incompatibilità con la matematica. Mens sana in corpore pigro.

Commenti (17)
  1. Roberto 22 novembre 2017 at 13:18

    Ciao Susanna, volevo chiederti se con il metodo da te illustrato è possibile incorporare un channel di youtube anzichè un singolo video. Sul sito developpers di youtube leggo:
    “Caricamento dei video caricati da un utente
    Imposta il parametro listType del player su user_uploads. Il parametro list deve inoltre essere impostato sul nome utente di YouTube a cui appartengono i video che vuoi caricare.
    http://www.youtube.com/embed?listType=user_uploads&list=USERNAME

    Ma nello script dove imposto i parametri ‘listType’ e ‘list’

    Grazie e ciao

    Roberto

  2. Roberto 27 giugno 2017 at 15:01

    Ciao Susanna e complimenti per il tutorial. Volevo chiederti: è possibile eliminare la voce altri video che spunta se si stoppa il video o alla fine del filmato? Grazie

    • Susanna Marsiglia 1 luglio 2017 at 21:02

      Ciao Roberto, per questa funzione in particolare è necessario aggiungere &rel=0 alla fine dell’URL del video nel codice embed. Purtroppo però devo avvertirti che non funziona con lo script che trovi in questo tutorial, quindi dovresti usare il normale codice iframe di YouTube, ad esempio:
      Cercherò di lavorare per migliorare lo script e integrarla, grazie per il suggerimento!

  3. Donato 26 febbraio 2017 at 21:58

    Ciao Susanna e complimenti davvero per l’utilissimo tutorial!
    Ho applicato i tuoi suggerimenti a questo articolo: http://www.frequenzappennino.com/2017/02/26/bugo-al-dude-bugo-il-dude/ ed in effetti da mobile si vede come da aspettative! Il problema è che però ora da desktop l’anteprima con l’immagine statica si vede bene, ma il video in realtà è molto piccolo…come si può risolvere?
    Ciao e grazie

  4. sircoast 6 novembre 2016 at 23:03

    Tutorial utilissimo, mi sta aiutando moltissimo!
    Solo una cosa: come si può comprendere, nella visualizzazione a video partito, la barra inferiore di yt con i comandi del player? Io ora non li vedo… Grazie! (non uso wordpress)

    • Susanna Marsiglia 14 novembre 2016 at 22:38

      Ciao sircoast, grazie per il tuo commento!
      Una volta che il video è partito dovresti vederlo come un normalissimo video di YouTube, comandi compresi – soltanto la preview è un’immagine statica e quindi non ha i comandi.
      Riusciresti a inviarmi un link alla pagina in cui hai incorporato il video per verificare che il Javascript non abbia conflitti?

  5. Lorenz Crood 6 ottobre 2016 at 18:46

    Complimenti per il tutorial!

  6. Marco 15 settembre 2016 at 18:05

    Ciao Susanna, un post molto ben scritto, ma io sono un po’ tardo ancora con wp. Ho un sito dove in home ho inserito parecchi video. Ovviamente il caricamento è lentissimo e non riesco a mettere in pratica quanto scrivi. Ho scaricato il plugin ma non mi è chiaro se devo solo inserire il blocco java o se devo inserire anche i CSS e la parte html. In sostanza non saresti così gentile da descrivere in modalità WP tutti i passaggi necessari?

    Grazie e complimenti nuovamente
    Marco

    • Susanna Marsiglia 19 settembre 2016 at 14:53

      Ciao Marco, scusami la risposta tardiva! 🙂
      Il procedimento in WordPress è il seguente:
      1. Per prima cosa scarica il plugin che ho indicato nell’articolo (OH Add Script Header Footer) e attivalo
      2. Vai sull’editor del sito (Aspetto -> Editor) e incolla nello style.css del tema il codice CSS che ho inserito nell’articolo. Salva le modifiche.
      3. Sempre nel backend di WordPress, apri la pagina in cui si trovano i tuoi video e scorri fino in fondo, dovresti vedere il riquadro di OH Add Script header con gli spazi per inserire script su quella pagina. Incolla lo script che trovi nell’articolo (quello nel paragrafo “Javascript”) nel riquadro “script footer”.
      4. Una volta fatto, recupera l’ID del video che vuoi inserire (lo trovi dopo watch?v= nell’URL del video) e incolla il codice html che trovi nel paragrafo “Codice da incorporare” nel punto della pagina in cui vuoi che compaia il video. Ovviamente ricorda di incollare l’ID del video dove vedi VIDEOID.

      Fammi sapere se sei riuscito seguendo questi passaggi!

  7. Davide 6 settembre 2016 at 16:54

    Ciao Susanna, ottimo tutorial.. Complimenti!

    Ho però un problema con la versione mobile, in quanto non viene visualizzato il video caricato ma l’immagine di “riserva” caricata sul mio tema.

    Utilizzo wordpress col tema Enfold, uno dei più famosi e con maggiori feedback positivi.
    Nella versione desktop non c’è bisogno di inserire alcun codice in quanto è già presente negli strumenti del tema.

    Ho seguito le tue indicazioni scaricando il plugin e inserendo il codice nella pagina del video, nel secondo campo senza selezionare le due opzioni in alto.

    Purtroppo però, dal mobile e dal tablet continuo a visualizzare l’immagine di riserva.

    Potresti aiutarmi?
    La pagina in questione è la seguente http://www.tricopigmentazionesardegna.it/tricopigmentazione-cagliari-sardegna/

    Grazie
    Davide

    • Susanna Marsiglia 7 settembre 2016 at 16:57

      Ciao Davide, ti rispondo anche qui nel caso in cui qualcun altro avesse le tue stesse difficoltà:

      Nel tuo caso il problema potrebbe essere semplicemente dovuto alla configurazione del tema che stai usando. Cercando un po’ su Google ho trovato questo thread in cui gli sviluppatori segnalano chiaramente che i video su mobile sono disabilitati di default: http://www.kriesi.at/support/topic/home-page-video-on-mobile-phone/
      Nello stesso thread forniscono anche un workaround per risolvere il problema. Seguendo gli step che descrivono dovresti riuscire a ottenere il risultato che desideri!

      P.S. Quando usi un tema premium di WordPress, nel 99% dei casi il supporto è gratuito per almeno sei mesi. Visto che questi temi hanno molte configurazioni di default come questa, il mio consiglio è sempre chiedere assistenza al loro supporto prima di ogni altra cosa, proprio per sincerarti che il tuo problema non sia dovuto al loro tema.

      Spero di esserti stata utile!

  8. Francesco 20 gennaio 2016 at 14:12

    Cara Susanna,

    complimenti vivissimi per lo script che, però, non riesco ancora a far funzionare.
    Usando wordpress ho installato ‘OH Add Script Header Footer’, tuttavia il video non vuol caricarsi e, ispezionando il codice, ho visto che la chiusura dello script ” non compare nel codice finale della pagina pur essendo presente nella finestra del plugin. Questo è l’unico errore che ho riscontrato oltre al fatto che il plugin non posiziona lo script immediatamente prima di , ma per questo credo non ci siano grossi problemi (o sbaglio?)
    La pagina in questione, se vuoi dare un’occhiata, è questa: http://www.magravsitalia.com/fai-da-te/energia-fai-da-te/generatore-magravs-fai-da-te-magravs-power-universal-system/
    Il video per il quale ho utilizzato il tuo codice è il secondo.
    Grazie infinite per quanto potrai fare!

    • Susanna Marsiglia 21 gennaio 2016 at 15:31

      Ciao Francesco,
      grazie per il tuo commento! 🙂
      Ho ispezionato un po’ la pagina che mi hai linkato e ho notato qualche piccola discrepanza che ti segnalo di seguito:

      – lo script è ripetuto più volte (ne ho trovato uno prima del video e uno subito dopo). Con OH Add Script va incollato SOLO in “add script to be added to the footer” (il secondo spazio) senza barrare le caselle in alto “Hide Generic header/footer script”
      – il tuo script risulta leggermente diverso da quello che ho incollato nell’articolo, e infatti genera parecchi errori passandolo in un debugger. Assicurati che sia identico e per scrupolo usa questo tool per verificare che non si rompa nulla: http://www.jslint.com/ (con il codice giusto dovrebbe segnalarti solo tre piccoli errori di sintassi, con il tuo ne genera una ventina)

      Fammi sapere se riesci a risolvere!

  9. Giacomo 24 novembre 2015 at 12:53

    Ciao Susanna, ho provato il tuo script e funziona alla grande.

    Con questo piccolo accorgimento il caricamento delle pagine è molto più veloce ;), grazie per averlo condiviso.

    Peccato che l’autoplay dei video non funzioni sui dispositivi mobile.
    Ho provato con Android, iOS e WindowsPhone ma tutti e tre impediscono al video di partire al caricamento del iframe ignorando la funzione di autoplay di Youtube e costringono l’utente a fare un secondo “tap” per avviare il video.
    Si potrebbe aggiungere una funzione che simuli il secondo click ma non so quanto sia corretto al livello di User Experience e Accessibilità.

    A presto!

  10. Matteo 30 ottobre 2015 at 16:56

    ciao Susanna, grazie del tutorial utilissimo!!
    ti volevo chiedere, è possibile con questo metodo anche realizzare un carousel a tutta pagina? ovvero caricare solo le immagini con il tasto play sopra, ma in un carousel con frecce e scritte.
    il fatto è che con il carousel che voglio fare avrei delle scritte che coprono il tasto play e l’utente non potrebbe cliccarlo. esiste un altro modo?

    • Susanna Marsiglia 30 ottobre 2015 at 17:12

      Ciao Matteo,
      mi fa piacere tu abbia trovato utile il tutorial! 🙂

      Per quanto riguarda il carousel ti direi che in linea teorica si può fare, ma ovviamente come dici tu risulterebbe parecchio scomodo per gli utenti. Il tasto play si può spostare a piacimento tramite CSS, ma è una soluzione che ti sconsiglio.
      Difficilmente qualcuno vorrà cliccare per far partire un video in un carousel, senza contare che rischierebbe di distogliere l’attenzione dalla tua call to action.
      Ti consiglio in alternativa di utilizzare delle gif, che non pesano quanto un video e partono in automatico, oppure un video background in autoplay.
      Cercherò di scrivere presto un tutorial in proposito 😉

Lascia un commento

Il tuo indirizzo email non verrà pubblicato. I campi obbligatori sono segnalati *