Troppo spesso le tecniche CSS vengono sottoposte ad una mistificazione non appena la loro prima pubblicazione viene riproposta su altri siti. Una di queste tecniche riguarda i video responsive.
La tecnica è la seguente:
video {
max-width: 100%;
height: auto;
}
L'errore di fondo è che si considerano i video come elementi privi di attributi. L'altezza automatica in questo caso verrà calcolata a partire dall'attributo height del video, perché
quella è l'altezza intrinseca dell'elemento.
Il video si adatterà in larghezza ed in altezza? No, perché:
- manca la dichiarazione
display: block(i video sono elementi rimpiazzati) - manca un'altezza minima tale che le proporzioni del video vengano rispettate.
In pratica bisogna definire un'altezza minima ed usare le Media Queries affinché la ratio del video venga rispettata:
video {
width: 100%;
min-height: 300px;
display: block;
}
@media only screen and (max-width: 320px) {
video {
min-height: 160px;
}
}
Se si conosce la ratio, ossia il rapporto che deve esistere tra larghezza ed altezza, è facile far scalare un video a diverse risoluzioni. Affidarsi agli automatismi dei browser non è mai una pratica raccomandabile.