Responsive web design e oggetti multimediali

Aggiornato il



<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">


Se stai leggendo questo articolo avrai sicuramente già visto il codice qui sopra: è il tag <meta> da inserire nel tuo sito, qualora volessi renderlo “responsive“.

E quando si progetta un sito secondo i principi del responsive web design, solitamente i primi problemi inziano con gli oggetti multimediali: img, video, iframes e oggetti incorporati (embed). Questi tendono infatti a comportarsi in maniera indipendente rispetto al loro contenitore, quasi non intendessero rispettarne le dimensioni.

Ho imparato che basta inserire questa regola nel CSS per risolvere il 99% dei problemi con video e immagini:


img, video, canvas {

    max-width: 100%;
}

Questo codice ha infatti la capacità di “forzare” la larghezza dell’oggetto su quella del suo contenitore, in modo che entrambe le dimensioni rimangano coerenti.

Iframes e Embed

Con iframes ed oggetti embed però, saltano fuori le prime “crepe”, soprattutto se questi sono importati da servizi di terze parti quali YouTube o Google Maps.

Ma la cura esiste! La soluzione migliore consiste nel posizionare in modo assoluto l’oggetto importato, e inserirlo in un contenitore personalizzato con width pari a 100%. Tale contenitore deve anche avere height pari a 0, in modo da evitare un noto bug di Internet Explorer 5 e 6.

Aggiungo infine un quantitativo di padding-bottom, calcolato in base alle proporzioni dell’oggetto che sto caricando. Se ad esempio un video è in 16:9, allora:

9/16 = 0.5625

Il che significa, nel CSS:



.iframe-container {

    padding-bottom: 56.25%; /* 16:9 */

}


Perchè padding-bottom e non padding-top? Sempre per un problema con Internet Explorer (in questo caso il 5.5, quindi un problema tutto sommato “veniale”): se uso padding-top infatti, IE 5.5 non è in grado di posizionare il contenitore in modo assoluto.

Un esempio concreto

Supponiamo di dover quindi importare un iframe (un classico video di YouTube). Decido di usare un <div> come contenitore, a cui assegno la classe iframe-container:



<div class="iframe-container">

    <iframe src="http://youtu.be/CWX34ShfcsE"></iframe>

</div>

Nel CSS:



.iframe-container {

    width: 100%; 
    height: 0; 
    padding-bottom: 56.25%; /* 16:9 */
    position: relative;
}

iframe { 

    width: 100%; 
    height: 100%; 
    position: absolute; 
    left: 0; 
    top: 0;
}

Prova a variare la dimensione della finestra del browser per vedere come il video si “ri-adatta”.

E con WordPress?

Niente di complicato: nel caso volessi caricare un video all’interno di un post di WordPress, basta anche qui inserire il contenitore attorno all’oggetto embed. Sempre su un mio recente articolo puoi leggere un tutorial su come caricare correttamente un video in WordPress.

Approfondimenti

di Mattia Frigeri

COMMENTI

  • Ciao,
    ti commento un post dello scorso anno, ma ti ho trovato subito con Google :)

    Ho visto questo post da cellulare e vedo che c’è lo stesso problema che riscontro io inserendo un video Youtube su una pagina web: ossia non vedo il video nel sito, ma vengo reindirizzato su Youtube.

    È normale? Ho uno smartphone e uso Opera Mini.

  • Grazie, nel frattempo avevo installato Firefox nel cellulare e il video si vede nella pagina. Infatti Opera Mini è un browser creato apposta per alleggerire al massimo la navigazione.

  • Ciao io ho un problema con il codice iframes in un sito creato con wordpress. Praticamente appena inserisco il codice in una pagina post o widget mi esce solo uno spazio bianco ma ciò’ che contiene tale codice iframe non si vede ho provato ad aggiungere codici nel css per sbloccare questa funzione ma nulla. C’e’ una soluzione a questo problema al quanto stupido ma altrettanto fastidioso ?

    • Ciao Antonio, scusami, mi ero perso il tuo messaggio!
      Guarda, credo che la soluzione sia comunque nel CSS, anzi, ne sono quasi sicuro.
      Hai avuto modo di controllare se non si tratta di un limite della grafica del tuo template, ovvero, che non ci sia qualche regola che crea il problema, all’interno del file style.css?