Web design reattivo - Video
Utilizzo della proprietà larghezza
Se la widthproprietà è impostata su 100%, il video player sarà reattivo e si ridimensionerà su e giù:
Esempio
video {
width: 100%;
height: auto;
}
Nota che nell'esempio sopra, il video player può essere ridimensionato per essere più grande delle sue dimensioni originali. Una soluzione migliore, in molti casi, sarà invece quella di utilizzare la
max-widthproprietà.
Utilizzo della proprietà max-width
Se la max-widthproprietà è impostata su 100%, il video player si ridimensionerà se necessario, ma non si ridimensionerà mai per essere più grande delle sue dimensioni originali:
Esempio
video {
max-width: 100%;
height: auto;
}
Aggiungi un video alla pagina Web di esempio
Vogliamo aggiungere un video nella nostra pagina web di esempio. Il video verrà ridimensionato per occupare sempre tutto lo spazio disponibile:
Esempio
video {
width: 100%;
height: auto;
}