Alcune tecniche CSS funzionano, altre tecniche non funzionano, altre funzionano ma sono inutili. A questo terzo tipo appartiene la cosiddetta tecnica dei video elastici. Vediamo perché.
Qualsiasi video, sia esso inserito tramite object, iframe, video o embed, non soffre dello stesso problema delle immagini, ossia del rapporto proporzionale tra larghezza ed altezza.
I video non perdono in qualità se si modificano le loro dimensioni, in quanto la loro qualità è intrinseca e non dipende dalle loro dimensioni. Quindi la tecnica presentata nell'articolo è per lo meno ridondante.
Una volta definita un'altezza massima, il resto è molto semplice:
object, iframe,
video, embed {
height: 15em;
width: 100%;
display: block;
}
Questi quattro elementi sono di tipo inline-block. Una volta trasformati in elementi di blocco, il loro box model viene trattato come quello di un qualsiasi altro elemento di blocco. Ereditano la larghezza del loro genitore ed hanno un'altezza massima prestabilita.
Non è necessario aggiungere altro codice, perché le misure percentuali scalano allo stesso modo su qualsiasi dispositivo e a qualsiasi risoluzione e su qualsiasi browser supporti i CSS 2.