Responsivt webbdesign - Video

Använd width egenskapen

Om width Egenskapen sätts till 100%, då videospelaren kommer att anpassa sig och förstora eller förminska:

Exempel

video {
  width: 100%;
  height: auto;
{}

Prova själv

Observera att videospelaren i det ovanstående exemplet kan förstora till en storlek större än den ursprungliga storleken. I många fall är ett bättre alternativ att använda max-width egenskapen.

Använd max-width egenskapen

Om max-width Egenskapen sätts till 100%, då videospelaren kommer att förminskas i proportion men aldrig förstora till en storlek större än den ursprungliga storleken:

Exempel

video {
  max-width: 100%;
  height: auto;
{}

Prova själv

Lägg till video på exempelwebbsidan

Vi hoppas lägga till video på exempelwebbsidan. Videon kommer att justeras i storlek så att den alltid fyller all tillgänglig plats:

Exempel

video {
  width: 100%;
  height: auto;
{}

Prova själv