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