Responsive Web Design - Video

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;
}

Probeer het zelf

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;
}

Probeer het zelf

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;
}

Probeer het zelf