YouTube Video

Incorporare i video di YouTube senza iFrame

Un metodo alternativo per incorporare i video di YouTube

Libera traduzione e adattamento dell'articolo "A Better Method for Embedding YouTube Videos on your Website", scritto dal blogger e programmatore indiano Amit Agarwal

Nell'articolo (link alla versione originale) l'autore propone un metodo alternativo al tipico embedding del codice iframe rilasciato da YouTube, un metodo che, secondo gli attuali dettami del mobile friendly, non solo è perfettamente responsive, ma che soprattutto incide pochissimo sul tempo di caricamento della pagina. Ed è inutile ricordare qui quanto i lunghi tempi di attesa nel caricamento delle pagine web siano oggi davvero poco tollerati dai visitatori, e ancor meno da Google...

Per quanto riguarda i tempi di caricamento va tenuto presente il fatto che il browser - solo per il rendering del player video di YouTube - deve scaricare circa mezzo MB di file aggiuntivi JavaScript (vedi screenshot della versione originale dell'articolo), e, cosa ancor più significativa, questi file vengono scaricati anche se il visitatore non riproduce il video.

Il filmato incorporato col codice iframe non solo aumenta sensibilmente la dimensione in byte della pagina, ma aumenta anche il numero di richieste HTTP necessarie per il rendering del lettore video, dilatando ancor più il tempo di caricamento. L'altro svantaggio nell'utilizzo dell'iframe, e di sicuro non un piccolo svantaggio nell'era dei device mobili, è di non essere responsive.

Incorporare i video di YouTube senza aumentare le dimensioni della pagina

Google+ utilizza una tecnica più intelligente per incorporare i video di YouTube: nella pagina viene caricata solamente l'immagine di anteprima del video, mentre il lettore vero e proprio viene richiamato solo quando l'utente clicca sulla miniatura per visualizzare il filmato ad essa collegato. E dato che le immagini thumbnail di YouTube sono di circa 15KB, si potrà facilmente ridurre di più di 500KB il peso complessivo della pagina!

Col metodo impiegato in Google+, quando un visitatore clicca sul pulsante di riproduzione l'immagine di anteprima viene sostituita dal lettore video standard di YouTube con la funzione autoplay impostata a 1 (vedi lo script riportato qui sotto), così che la riproduzione del video parta istantaneamente.
Il vantaggio tangibile è che i file JavaScript richiesti per l'esecuzione del video vengono caricati solo ed esclusivamente quando l'utente decide di visualizzare il video incorporato, e non altrimenti.

Incorporamenti leggeri e responsive

Il codice standard di YouTube utilizza il tag iframe, all'interno del quale larghezza e altezza del lettore video sono definiti con misure assolute espresse in pixel. Ciò rende non responsive il lettore che sarà visualizzato sulla pagina.

<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>

Il nuovo codice per l'embedding, diversamente dall'iframe, non specifica le dimensioni in pixel; in più il tag iframe è sostituito da un tag div, e l'iframe viene aggiunto alla pagina solo quando il visitatore clicca sul pulsante di riproduzione.

Questo è quindi il nuovo snippet da utilizzare in qualunque parte della pagina vogliamo fare apparire il video.
Non occorre certo ricordarlo qui, ma il "VIDEO_ID" che deve essere inserito nel div è la stringa alfanumerica che si trova nel codice iframe, oppure nel link per condividere il filmato.

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

Il codice JavaScript che segue rintraccia tutti i video incorporati in una pagina web e sostituisce gli elementi div con le miniature dei video, predisponendo anche l'iframe con la variabile ?autoplay=1.

Il codice si può incollare nell'index.php del template che si utilizza, subito prima della chiusura del tag head; oppure, se il template è di quelli che hanno la possibilità di inserire del Custom Code direttamente nel backend, basta incollarlo nella finestra di input "Before </head>".
Le due modalità portano allo stesso risultato, con la differenza che se si modifica l'index.php bisognerà sicuramente reinserire questo JavaScript al primo aggiornamento del template. Nel secondo caso (inserimento del codice dal lato amministrativo del template), l'aggiornamento non dovrebbe cancellare le modifiche apportate, lasciando quindi intatto il codice aggiunto.

<script>

    /* Light YouTube Embeds by @labnol */
    /* Web: http://labnol.org/?p=27941 */

    document.addEventListener("DOMContentLoaded",
        function() {
            var div, n,
                v = document.getElementsByClassName("youtube-player");
            for (n = 0; n < v.length; n++) {
                div = document.createElement("div");
                div.setAttribute("data-id", v[n].dataset.id);
                div.innerHTML = labnolThumb(v[n].dataset.id);
                div.onclick = labnolIframe;
                v[n].appendChild(div);
            }
        });

    function labnolThumb(id) {
        var thumb = '<img src="https://i.ytimg.com/vi/ID/hqdefault.jpg">',
            play = '<div class="play"></div>';
        return thumb.replace("ID", id) + play;
    }

    function labnolIframe() {
        var iframe = document.createElement("iframe");
        var embed = "https://www.youtube.com/embed/ID?autoplay=1";
        iframe.setAttribute("src", embed.replace("ID", this.dataset.id));
        iframe.setAttribute("frameborder", "0");
        iframe.setAttribute("allowfullscreen", "1");
        this.parentNode.replaceChild(iframe, this);
    }

</script>

Per finire, il codice css da copiare nel file template.css o, più opportunamente, in un file custom.css
La creazione e l'utilizzo di un file personalizzato per apportare modifiche e/o aggiungere codice al css nativo del template, mette al riparo da eventuali aggiornamenti, i quali non potranno né cancellare, né modificare il codice così inserito.

<style>
    .youtube-player {
        position: relative;
        padding-bottom: 56.23%;
        /* Use 75% for 4:3 videos */
        height: 0;
        overflow: hidden;
        max-width: 100%;
        background: #000;
        margin: 5px;
    }
    
    .youtube-player iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 100;
        background: transparent;
    }
    
    .youtube-player img {
        bottom: 0;
        display: block;
        left: 0;
        margin: auto;
        max-width: 100%;
        width: 100%;
        position: absolute;
        right: 0;
        top: 0;
        border: none;
        height: auto;
        cursor: pointer;
        -webkit-transition: .4s all;
        -moz-transition: .4s all;
        transition: .4s all;
    }
    
    .youtube-player img:hover {
        -webkit-filter: brightness(75%);
    }
    
    .youtube-player .play {
        height: 72px;
        width: 72px;
        left: 50%;
        top: 50%;
        margin-left: -36px;
        margin-top: -36px;
        position: absolute;
        background: url("//i.imgur.com/TxzC70f.png") no-repeat;
        cursor: pointer;
    }

</style>

Qui termina l'esauriente esposizione fatta da Amit Agarwal, esposizione alla quale voglio aggiungere in coda una piccola prova empirica su come effettivamente si comporti questa tecnica di embedding; nulla di scientifico, naturalmente, ma solo un veloce test per valutare sul campo quanto finora scritto.

La mia prova è quindi iniziata misurando la dimensione della pagina senza alcun video, dimensione che si è assestata a 385KB.

Ho poi inserito un video utilizzando il codice iframe, e il peso della pagina è passato a 925KB, così aumentando così di ben 540KB, dato perfettamente in linea con quanto visto in precedenza.

Una volta eliminato l'iframe e inserito lo stesso video con la tecnica proposta da Amit Agarwal (è il video che potete vedere qui sotto), la dimensione della pagina è scesa a 405KB, una ventina di KB in più rispetto alla pagina vuota. Davvero un buon risultato.

 

 

Giusto per completare e ampliare questa prova sul campo, ho inserito altri sei video, col risultato che la pagina raggiunge ora la ragionevolissima dimensione di 485KB.

 
 
 
 
 
 

 Per completezza di informazione, le misure delle dimensioni della pagina nei vari assetti sono state effettuate grazie al servizio gratuito Pingdom Website Speed Test.

© 2017 Disegnare il Web. Tutti i diritti riservati.

disegnareilweb.cloud non è collegato con joomla.org
tutti i marchi riportati appartengono ai legittimi proprietari

Cookie Policy

Privacy Policy