Responzivní web design – videa
Použití vlastnosti šířka
Pokud je width
vlastnost nastavena na 100 %, přehrávač videa bude reagovat a bude se měnit nahoru a dolů:
Příklad
video {
width: 100%;
height: auto;
}
Všimněte si, že ve výše uvedeném příkladu lze přehrávač videa zvětšit tak, aby byl větší, než je jeho původní velikost. Lepším řešením v mnoha případech bude
max-width
místo toho použít nemovitost.
Použití vlastnosti max-width
Pokud je max-width
vlastnost nastavena na 100 %, přehrávač videa se v případě potřeby zmenší, ale nikdy se nezvětší, aby byl větší než původní velikost:
Příklad
video {
max-width: 100%;
height: auto;
}
Přidejte video na ukázkovou webovou stránku
Chceme přidat video na naši ukázkovou webovou stránku. Velikost videa bude upravena tak, aby vždy zabírala veškerý dostupný prostor:
Příklad
video {
width: 100%;
height: auto;
}