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.
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.
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”.
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.
Questo blog è curato e aggiornato per pura passione e amore degli argomenti. Se tuttavia ritieni che per te sia stato di qualche valore, puoi mettermi 5 stelline su Google, o valutare di assumermi per realizzare il tuo nuovo e fantastico sito web, oppure offrirmi una birra, un caffè o una Ferrari.
Basta cliccare qui sotto ↓
Contattami o iscriviti alla mia (pazzesca) newsletter
© 2023 Mattia Frigeri
Ricordami di aggiornare l’anno il primo di gennaio ;)
Privacy Policy – Cookie Policy – Aggiorna preferenze
P.I. 02542140344 – C.F. frgmtt81a24g337z