Video a dimensioni flessibili con i CSS

7 luglio 2009

height: 0

Specificando un’altezza pari a 0 assegniamo a questo elemento un “layout”, facendo in modo che IE5 e IE6 dimensioneranno in modo corretto il box all’interno. Per saperne di più si può leggere l’articolo On having layout.

Nota: poiché IE5 e IE6 trattano la larghezza come larghezza minima, non dovreste usare width: 100% come modo per attivare il layout. Ciò causa un’espansione del box per riempire il suo contenitore piuttosto che rispettare la larghezza che impostiamo per il contenitore.

Ora consideriamo le dichirazioni all’interno dell’elemento con classe .element-to-stretch.

position: absolute

Ciò libera l’elemento dai limiti in altezza del suo contenitore. In questo modo esso può essere posizionato sopra l’area del padding.

top: 0

Impostiamo top: 0 per posizionare il box vicino al lato superiore del suo elemento parente.

left: 0

Questa dichiarazione posiziona il box in prossimità del lato sinistro del suo elemento parente.

width: 100%

Dichiarando width: 100% facciamo sì che il box si adatti per riempire con le sue dimensioni la larghezza del suo contenitore.

height: 100%

Questa dichiarazione fa adattare il box all’altezza del suo contenitore.

background: teal

Applichiamo un colore di sfondo per mostrare il layout del box.

La vera questione

Il terzo esempio usa un video di YouTube, con il markup di YouTube, così abbiamo bisogno di creare spazio per l’interfaccia con i controlli del player video. Notate che l’altezza del player è statica: è alta 25px, a prescindere dalle dimensioni del video. Cambiamo anche il valore del padding per mostrare il video in formato widescreen (16:9):

#containingBlock {
	width: 50%;
}

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 25px;
	height: 0;
}

object,
embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

Diamo un’occhiata ai nostri nuovi selettori, iniziando dal selettore #containingBlock.

width: 50%

Si tratta di un semplice contenitore per dimostrare il ridimensionamento del video in base alla larghezza del viewport del browser. Nell’esempio precedente il blocco contenitore era invece l’elemento body.

Ora esaminiamo un paio di dichiarazioni per il selettore .videoWrapper.

padding-bottom: 56.25%

Per creare l’aspetto in 16:9, dobbiamo dividere 9 per 16 (0,5625 o 56,25%).

padding-top: 25px

Per evitare problemi con il box model usiamo padding-top invece che height per creare spazio per l’interfaccia con i controlli del player.

Infine, usiamo il selettore object embed perché, mentre alcuni browser usano object (Safari), altri hanno bisogno di embed (FIrefox).

Fatto. Nella prossima parte vedremo di aggiustare le cose per Internet Explorer.

Se vuoi aggiornamenti su Video a dimensioni flessibili con i CSS inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su Video a dimensioni flessibili con i CSS

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy