Vastauskykyinen verkkosivun suunnittelu - Video

Käytä leveys ominaisuutta

Jos leveys Ominaisuus asetettu 100％，video-soittimen tulee vastata ja kutistua tai laajentua:

Esimerkki

video {
  leveys: 100%;
  korkeus: auto;
}

Kokeile itse

Huomaa, että yllä olevassa esimerkissä video-soittimen voi laajentaa suuremmaksi kuin alkuperäinen koko. Monissa tapauksissa parempi ratkaisu on käyttää max-leveys ominaisuutta.

Käytä max-leveys ominaisuutta

Jos max-leveys Ominaisuus asetettu 100％，video-soittimen tulee kutistua suhteellisesti, mutta ei suuremmaksi kuin alkuperäinen koko:

Esimerkki

video {
  max-leveys: 100%;
  korkeus: auto;
}

Kokeile itse

Lisää video esimerkkisivulle

Toivomme, että voimme lisätä videoita esimerkkisivulle. Videoja sopeutetaan aina, jotta ne aina täyttävät kaikki käytettävissä olevat tilat:

Esimerkki

video {
  leveys: 100%;
  korkeus: auto;
}

Kokeile itse