Condividi

“Video responsive con HTML e CSS, guida definitiva”

Rendiamo un video incorporato da youtube completamente responsive, vediamo come aggiungere margini correttamente e gestire qualsiasi aspect ratio senza mai utilizzare jQuery.

icona Diario di un Web designer

icona Pubblicato il

icona Scritto da Giovanni Cesaro

icona Video responsive, Tutorial, Web design, HTML, CSS

  • icona

    Introduzione

  • icona

    Tutorial

  • icona

    Spiegazione

  • icona

    Extra

  • icona

    Conclusioni

Introduzione

Quando mi metto a scrivere una guida come questa lo faccio perché sono il primo ad essersi trovato a sbattere la testa da tutte le parti per riuscire a mantenere le proporzioni di un video incorporato da youtube su tutti i dispositivi. E non ditemi che sono l'unico maniaco ossessivo che ha una fitta al petto quando vede cose di questo tipo in giro per i siti:

video non responsive

E c'è da dire che queste non sono le soluzioni peggiori che ho trovato, ma non ho voluto turbarvi troppo. Non pensiamoci più, fate un bel respiro profondo e cominciamo a risolvere queste oscenità.

Torna su

Tutorial

1. Copiare codice da incorporare Partiamo con il copiare da Youtube il codice da incorporare del video che ci interessa, lasciamo le dimensioni di default perché per ora non ci interessano, incolliamo il codice sulla pagina del sito ed iniziamo immediatamente a renderlo responsive.
Vediamo un esempio del codice:

<iframe width="560" height="315" src="www.youtube.video" frameborder="0" allowfullscreen><⁄iframe><⁄p>

2. Creare un contenitore La prima cosa da fare per fare in modo che il video si adatti in modo proporzionato alla larghezza della pagina è creare un contenitore che lo racchiuda, lo facciamo mettendolo all'interno di un marcatore "div", poi aggiungiamo un "id" a piacere, il mio si chiamerà "video-wrapper".
Ecco il risultato:

<div id="video-wrapper">
    <iframe width="560" height="315" src="www.youtube.video" frameborder="0" allowfullscreen><⁄iframe>
<⁄div>

3. Formattare il contenitore Ok, ora che il video è all'interno del "div" passiamo al foglio di stile e capiamo rapidamente assieme cosa dichiarare per i nostri due elementi. Il contenitore "video-wrapper" dovrà avere un larghezza del 100% e un altezza di "0", cosa parecchio strana, ma tranquilli tra poco capirete il perché, altrimenti potete approfondire abbondantemente l'argomento sul paragrafo spiegazione. Torniamo a noi, "video-wrapper" dovrà avere anche un "padding-bottom" di "56.25%" (attenzione alle virgole che diventano punti) e un "position: relative;".
Il risultato sarà il seguente:

div#video-wrapper {
    width:100%;
    height:0;
    padding-bottom:56.25%;
    position:relative;
}

4. Formattare il video Ora che il contenitore è stato formattato dedichiamoci al video e iniziamo a scrivere. L'altezza e la larghezza dovranno essere entrambe al 100%, dopodiché impostiamo, come qualcuno avrà già capito, l'elemento in posizione assoluta, aggiungiamo allora un "position: absolute", quindi mettiamo un valore di "0" agli attributi "top" e "left" ed abbiamo finito! il video ora è completamente responsive e proporzionato per essere apprezzato da ogni dispositivo, ora puoi rilassarti.
Vediamo i codici nel CSS:

div#video-wrapper iframe,
div#video-wrapper object,
div#video-wrapper embed {
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
}

Se ti interessa approfondire l'argomento, vuoi aggiungere dei margini correttamente o ti interessa avere un altro aspect ratio per il video continua a leggere i paragrafi Spiegazione ed Extra. Potrai inoltre scaricare la cartella con il tutorial dal bottone colorato qui sotto (disponibile solo sulla versione Desktop e Tablet del sito).

Torna su

Spiegazione

Abbiamo visto che la soluzione è efficace ed il nostro video risponde ad ogni risoluzione adattandosi proporzionalmente, ma come fa a funzionare? Aiutiamoci con qualche domanda e risposta per toglierci ogni dubbio.

▪ Perché altezza a "0" e padding-bottom a "56.25%"? Qualcuno potrebbe chiedersi perché non abbiamo deciso di impostare direttamente l'altezza in percentuale senza aggiungere un padding, ecco perché: l'altezza di un elemento espressa in percentuale occupa uno spazio proporzionato all'elemento che lo contiene, ad esempio un'altro "div" o lo stesso body, considerando questo la situazione sarebbe diventata imprevedibile. Il padding invece si comporta diversamente, esprimendolo in percentuale va ad occupare uno spazio proporzionato alla larghezza dell'elemento stesso, facciamo un esempio: se un elemento occupa una larghezza di 100px aggiungendo un padding su piano verticale (bottom o top) del 50% questo occuperà esattamente 50px.

▪ Perché proprio "56.25%"? Oggi giorno l'aspect ratio (In italiano "rapporto d'aspetto") standard dei video, schermi e TV è di 16:9, ciò significa che la larghezza del video corrisponde a 16, mentre l'altezza a 9. Conoscendo questo rapporto sappiamo che l'altezza del nostro video corrisponderà a 9 parti uguali di 16 occupate dalla larghezza del video.

Se 16 corrisponde al 100% della larghezza del video, l'altezza in percentuale sara "100 : 16 x 9", ovvero "56,25", ecco che abbiamo trovato la percentuale che ci interessava.

Nota bene, non tutti i video che esistono sono in 16:9, tra gli altri più utilizzati ci sono 4:3 e 14:9, considerando questo non possiamo dire che questa soluzione sia adattabile a qualsiasi video. Per scoprire come comportarti con un video responsive con aspect ratio differente ti consiglio di leggere il paragrafo "Extra".

Torna su

Extra

▪ Inserire dei margini correttamente Per creare dei margini laterali pensando responsive la soluzione è utilizzare i valori in percentuale, quindi dal 100% del contenitore del video dovremmo poi sottrarre il totale dei due margini insieme.

Avendo dei margini laterali al 5% per ciascuno, la larghezza del contenitore video sarà 90% (100% meno 5%+5%), ovviamente il video contenuto sarà sempre al 100% di altezza e larghezza, in modo che occupi tutto lo spazio disponibile.

Facendo questo (tenendo in considerazione l'esempio appena posto) succede che il padding-bottom al 56.25% farà risultare il video con un altezza maggiore del normale, e quindi non proporzionata ad un aspect ratio di 16:9.

Per risolvere questa e qualsiasi altra situazione possibile andremo a fare un semplice calcolo per trovare il padding-bottom da inserire, ovvero: 56,25 per la larghezza del nostro contenitore, diviso 100. In questo caso specifico l'operazione sarà (56,25 x 90) : 100 = 50,625. Quindi il padding-bottom del contenitore sarà 50,625%. Ecco il risultato sul foglio di stile:

#contenitore-video {
    width: 90%;
    height: 0;
    padding-bottom: 50,625%%;
    margin:0 5%;
    position: relative;
}

▪ Come gestire video con un aspect ratio differente da 16:9Come già annunciato nei paragrafi precedenti il tutorial che abbiamo seguito ci mostra come rendere responsive un video preso da youtube con aspect ratio 16:9, ovvero uno dei più diffusi nella televisione e nel cinema al giorno d'oggi, ma non l'unico disponibile. Sappiamo tutti che 16:9 rappresenta un proporzione e che quindi 16 parti uguali corrispondono alla larghezza e 9 delle stesse parti uguali corrispondono all'altezza, tenendo in considerazione questa precisazione procediamo a comprendere la regola che ci permette di ottenere il padding-bottom del nostro contenitore video per un aspect ratio differente, per comodità teniamo come esempio il 4:3 per il resto della guida.

L'operazione da risolvere è questa:
Altezza aspect ratio PER cento DIVISO Larghezza aspect ratio

Nel nostro caso sarà (3 x 100) : 4
Partiamo a risolvere da sinistra, quindi 3 x 100, che da come risultato 300.
Andiamo a dividere il risultato per la larghezza del nostro aspect ratio, quindi 300 : 4.

Nel nostro esempio il risultato è 75, che costituisce la percentuale di padding-bottom del contenitore video, ecco il risultato che avremo sul foglio di stile con un aspect ratio di 4:3

#contenitore-video {
    width: 100%;
    height: 0;
    padding-bottom: 75%;
    position: relative;
}

Qui sotto una tabella con alcuni aspect ratio e rispettivo padding-bottom per contenitore video, se sei interessato ad inserire dei margini puoi leggere la prima sezione qui sopra "Inserire dei margini correttamente", che prevede un regola adattabile adattabile a qualsiasi aspect ratio.

25:16 64%
16:10 62.5%
16:9 56.25%
5:4 80%
4:3 75%
Torna su

Conclusioni

Siamo arrivati alla fine, grazie a tutti per l'attenzione, spero di essere stato utile e di avervi dato una dritta per risolvere il problema, ma la mia vera speranza è quella di iniziare a vedere in giro per internet più designer che decidano di non improvvisare soluzioni come quelle viste all'inizio. Ci tengo a specificare che questo non è sicuramente l'unico modo per ottenere un video responsive, ma forse l'unico che permette di farlo senza utilizzare jQuery.

Se la guida vi è piaciuta vi invito a diventare fan sulla la mia pagina Facebook per rimanere aggiornati sui prossimi articoli e tutorial e se vi va mettere un mi piace, commentare e condividere l'articolo. Ora che sai rendere un video responsive, ricordati: fallo con <style>.

Torna su

Ogni articolo che ho pubblicato e pubblicherò fa parte del mio personalissimo percorso da Web designer e racchiude tutto ciò che mi ha interessato, affascinato o che ho trovato utile durante il mio viaggio. Oltre ad essere un blog sul web design e delle sue sfaccettature è anche un contenitore di quello che sono e di quello che mi piace. Proprio per questo ho deciso di chiamarlo "Diario di un Web designer". Qui puoi trovare: articoli, news, tutorial approfonditi, pillole, suggerimenti e informazioni sul mondo del Web e design del web. Il Blog è collegato ad una pagina Facebook nella quale potrai commentare, condividere e votare ogni articolo pubblicato, discutere e confrontarti con altri appassionati di web design come te.