Responsive web design e oggetti multimediali

2013/03/25
web

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



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

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.~~