Responsief webdesign - Video's
De eigenschap width gebruiken
Als de widtheigenschap is ingesteld op 100%, reageert de videospeler en wordt deze omhoog en omlaag geschaald:
Voorbeeld
video {
width: 100%;
height: auto;
}
Merk op dat in het bovenstaande voorbeeld de videospeler kan worden opgeschaald om groter te zijn dan de oorspronkelijke grootte. Een betere oplossing zal in veel gevallen zijn om in plaats daarvan het
max-widthonroerend goed te gebruiken.
De eigenschap max-width gebruiken
Als de max-widtheigenschap is ingesteld op 100%, wordt de videospeler indien nodig verkleind, maar nooit groter dan de oorspronkelijke grootte:
Voorbeeld
video {
max-width: 100%;
height: auto;
}
Voeg een video toe aan de voorbeeldwebpagina
We willen een video toevoegen aan onze voorbeeldwebpagina. Het formaat van de video wordt aangepast om altijd alle beschikbare ruimte in te nemen:
Voorbeeld
video {
width: 100%;
height: auto;
}