di Mario Spada

Quando si inserisce un video YouTube in una pagina web, seguendo la normale procedura di copiare il codice che contiene l’iFrame fornito da YouTube, si rimane spesso insoddisfatti dell’eccessivo tempo di caricamento della pagina. Ci siamo dunque chiesti se esiste un sistema alternativo per velocizzare il caricamento.

Il metodo esiste ed è ben illustrato in questo articolo di Amit Agarwal (in inglese): A More Efficient Method for Embedding YouTube Videos

Il metodo utilizzato da Amit è di caricare mediante uno script javascript solo l’immagine del video e il pulsante del video in modo che sembri un player vero e proprio. Solo quando viene premuto il pulsante viene caricato il video player, in questo modo le risorse extra vengono caricato solo quando serve.

Inoltre sono presenti alcuni accorgimenti nel CSS che deve accompagnare lo script per rendere “responsive” il comportamento dell’iFrame che, normalmente non lo è. Infatti è proprio con i dispositivi mobile che è richesta una maggior velocità di caricamento considerando le minori capacità in termini di prestazioni dell’hardware e soprattutto la spesso scarsa velocità di connessione quando sono fuori da un collegamento WiFi.

Vediamo dunque il codice necessario, per prima cosa l’HTML:

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

ed ora lo script javascript:

    
    <script>
    (function() {
        var v = document.getElementsByClassName("youtube-player");
        for (var n = 0; n &lt; 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&amp;autohide=2&amp;border=0&amp;wmode=opaque&amp;enablejsapi=1&amp;controls=0&amp;showinfo=0");
        iframe.setAttribute("frameborder", "0");
        iframe.setAttribute("id", "youtube-iframe");
        this.parentNode.replaceChild(iframe, this);
    }
    </script>

ed infine il CSS per formattare correttamente il tutto:

<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; }
</style>

Il gioco è fatto!
Potete vedere un esempio qui (ci sono anche i tempi di caricamento sia del video caricato con il metodo tradizionale che con quello sopra descritto).

Riferimento: A More Efficient Method for Embedding YouTube Videos

Sviluppi (un plugin per WordPress): WordPress: un plugin per caricare video YouTube in modo veloce, leggero e responsive

Tags