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