Come rendere responsive i video incorporati di Youtube

Ci troviamo spesso a parlare di grafica responsive, ossia della grafica che si adatta allo schermo dal quale si visualizza il sito o blog, per offrire la migliore esperienza di navigazione agli utenti, siano essi collegati da desktop, smartphone o tablet.

Incorporare i video di Youtube è una pratica assai comune per i blogger, per questo bisogna essere sicuri che anche i video siano reattivi ed in grado di adattarsi alle dimensioni dello schermo del dispositivo del visitatore.

Esistono varie opzioni per farlo, ma la pratica più corretta è quella di fare una piccola modifica al foglio di stile css. Se il tuo sito o blog ha un file custom.css che sovrascrive il foglio di stile è li che dovrai inserire il codice che segue.

In pratica bisognerà inserire il codice embed del video dentro un div che andremo ad impostare all’interno del foglio di stile aggiungendo queste righe:

.video-responsive {
position: relative;
padding-bottom: 56.25%;
padding-top: 35px;
height: 0;
overflow: hidden;
}

.video-responsive iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}

Chiaramente le varie impostazioni possono essere modificate per ottenere il risultato più consono al sito o blog nel quale questa classe div viene implementata. Per apportare le modifiche correttamente andiamo a vedere cosa troviamo all’interno di questo codice:

  • Impostare nel contenitore la posizione relativa ci servirà ad impostare come assoluta quella dell’iframe (i video di Youtube si incorporano con iframe).
  • Il valore assegnato a padding-bottom serve a stabilire il rapporto tra altezza e larghezza del video incorporato: impostato a 56.25% consente la visione in 16:9, se invece si vuole un formato 4:3 bisogna sostituire tale valore con 75%.
  • Larghezza ed altezza sono impostate al 100%, come abbiamo detto l’altezza è relativa alla larghezza, che in questo caso è uguale alla larghezza disponibile sullo schermo, in base al device utilizzato.

Una volta inserito questo codice nel CSS non rimane altro che incorporare i video all’interno di un div, specificando la classe appena creata:

<div class="video-responsive">Qui il codice embed del video di Youtube</div>

e ricorda di incorporare sempre i video dentro questo div!

Hai dubbi o considerazioni sul contenuto di questo articolo?Non esitare a commentare!

5 Comments
  1. Reply
    Daniele 21/07/2014 at 11:16

    Ciao,

    io ho provato un paio di plugin, ma proverò anche questa tua soluzione. Il problema che ho riscontrato è che il video non viene visualizzato nel sito stesso, ma vengo rimandato su Youtube. Vedo l’anteprima, ma se clicco per vedere il filmato, si va ad aprire su Youtube.

    Uso Opera mini nel cellulare.

    Secondo te è possibile eliminare questo inconveniente?

    • Reply
      Elio 21/07/2014 at 11:40

      Ciao Daniele grazie per il tuo commento. Innanzitutto controlla che copi il codice iframe correttamente: nella pagina di YouTube sotto il video trovi la voce condividi e la sottovoce codice da incorporare, come probabilmente già saprai. A seconda della configurazione del tuo smartphone è possibile che venga aperta automaticamente l’applicazione di YouTube quando si clicca su un’anteprima. Potresti comunque provare con un altro browser mobile per vedere se il problema deriva da opera mini. In ogni caso inserire la modifica suggerita in questo articolo è una cosa molto semplice e soprattutto non ti sovraccarica l’installazione di WordPress con plugin di fatto inutili: ti consiglio di provarla e se ti va facci sapere i risultati. A presto.

      • Reply
        Daniele 21/07/2014 at 12:06

        Grazie della risposta.

        Il problema c’è con Opera mini. Con Firefox si vede benissimo e nella stessa pagina. Il tuo codice, però, mi taglia l’anteprima del video, che appare anche un po’ deformata 🙂

        • Elio 21/07/2014 at 13:55

          Su questo sito utilizziamo questo codice, come puoi vedere dalla rubrica “video della domenica” ad esempio non riscontriamo problemi del genere. A questo punto credo proprio che il problema sia in opera Mini dato che abbiamo testato questo codice su vari device e vari browser senza notare questa anomalia. Per scrupolo dovresti verificare che non entri in conflitto con il tema del tuo blog.

        • Daniele 21/07/2014 at 15:55

          Il problema era proprio Opera mini. Ho risolto con il plugin Responsive Video Light: ora il video si vede sui vari browser e anche con Opera mini.

Leave a reply