Responsivt websted design - Video

brug af width egenskab

hvis width egenskaben sættes til 100%, vil videoafspilleren svare og forstørres og forminskes:

Eksempel

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

Prøv det selv

Bemærk, at i de ovennævnte eksempler kan videoafspilleren forstørres til større end dens oprindelige størrelse. I mange tilfælde er det bedre at bruge max-width egenskaben.

brug af max-width egenskab

Hvis max-width Egenskaben sættes til 100%, vil videoafspilleren forminskes i forhold, men vil aldrig forstørres til større end dens oprindelige størrelse:

Eksempel

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

Prøv det selv

Tilføj video til eksempel websiden

Vi ønsker at tilføje en video til eksempel websiden. Videoen vil tilpasses, så den altid optager al tilgængelig plads:

Eksempel

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

Prøv det selv