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-player" data-id="VIDEOID"></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=1&showinfo=1");
    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("https://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.