Responsive Web Design - Video
- Vorige Pagina RWD Afbeelding
- Volgende Pagina CSS Grid Layout Module
Gebruik de width eigenschap
Als width
De eigenschap is ingesteld op 100%, dan zal de videospeler responsief zijn en uitbreiden en krimpen:
Voorbeeld
video { width: 100%; height: auto; }
Let op, in het bovenstaande voorbeeld kan de videospeler groter worden dan de oorspronkelijke maat. In veel gevallen is een betere oplossing om de max-width eigenschap te gebruiken.
Gebruik de max-width eigenschap
Als max-width
De eigenschap is ingesteld op 100%, dan zal de videospeler proportional smaller worden, maar zal nooit groter worden dan de oorspronkelijke maat:
Voorbeeld
video { max-width: 100%; height: auto; }
Video toevoegen aan de voorbeeldwebpagina
We hopen video's toe te voegen aan de voorbeeldwebpagina. De video's zullen worden aangepast in grootte zodat ze altijd de hele beschikbare ruimte innemen:
Voorbeeld
video { width: 100%; height: auto; }
- Vorige Pagina RWD Afbeelding
- Volgende Pagina CSS Grid Layout Module