Supporto volontario e collaborativo per Joomla!® in italiano

Un metodo "alternativo" per incorporare i video di YouTube

Valutazione attuale: 5 / 5

Stella attivaStella attivaStella attivaStella attivaStella attiva
 
Un metodo alternativo senza iframe 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 (qui il 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, cosa ancor più significativa, questi file vengono scaricati anche se il visitatore non riproduce il video.

Il filmato incorporato col codice iframe fornito da YouTube 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 sia immediata.
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 dove vogliamo fare apparire il video.
Non occorre certo ripeterlo 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 nel riquadro "Before </head>" (come ho fatto in una delle prove utilizzando il template free Helix 3).
Le due modalità portano allo stesso risultato, con la differenza che se modificate l'index.php dovrete sicuramente reinserire questo JavaScript al primo aggiornamento del template (e questo è quello che accadrà con Protostar).
Nel secondo caso (inserimento del codice dal lato amministrativo del template), l'eventuale 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, aumentando così di ben 540KB, dato perfettamente in linea con quanto visto in precedenza.

Una volta eliminato l'iframe e inserito lo stesso video  col metodo proposto da Amit Agarwal, la dimensione della pagina è scesa a 405KB, una ventina di KB in più rispetto alla pagina vuota. Davvero un buon risultato.
Ho provato anche ad aggiungerne altri sei, portando la pagina alla 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.


CommentaCommenta questo articolo sul forum

Ho scritto e condiviso questo articolo su Joomla.it, fallo anche tu. Invia ora un nuovo articolo!
Gianpaolo Capuzzo
Alcune informazioni su di me:


Ho anche scritto:
         ✔ diventa autore su Joomla.it

Ultima versione di Joomla!®

downloadVer. 3.8.0 Stabile Italiana
Data di rilascio: 19 Settembre 2017
(leggi la notizia Demo online

Le migliori estensioni gratuite

Un elenco aggiornato con i link a più di 100 estensioni fra componenti, moduli e plugin gratuiti per Joomla! 3

Manuale in italiano

Manuale in italianoPer conoscere meglio Joomla!, le sue caratteristiche ed il metodo di utilizzo leggi il manuale tradotto in italiano.

Molto utili anche le risposte alle domande più frequenti: FAQ

Sicurezza del proprio sito Joomla!Leggi anche: Nozioni sulla sicurezza del proprio sito

Autori di articoli recenti

Invia un articolo!Scrivi un articolo su Joomla.it e ricevi i ricavi dalle pubblicità di Google Adsense!
Segui queste istruzioni, condividi e collabora con la community. L'elenco degli autori attivi sul sito.

Libri consigliati

Torna su

Joomla.it sui Social Network

JoomlaDay Italia

JoomlaDay

Newsletter

Inserisci qui la tua e.mail: