Responsywne projektowanie stron internetowych — filmy
Korzystanie z właściwości szerokości
Jeśli width
właściwość jest ustawiona na 100%, odtwarzacz wideo będzie responsywny i skalowany w górę i w dół:
Przykład
video {
width: 100%;
height: auto;
}
Zwróć uwagę, że w powyższym przykładzie odtwarzacz wideo można przeskalować w górę, aby był większy niż jego oryginalny rozmiar. W wielu przypadkach lepszym rozwiązaniem będzie skorzystanie z tej
max-width
właściwości.
Korzystanie z właściwości max-width
Jeśli max-width
właściwość jest ustawiona na 100%, odtwarzacz wideo będzie skalowany w dół, jeśli będzie to konieczne, ale nigdy w górę, aby był większy niż jego oryginalny rozmiar:
Przykład
video {
max-width: 100%;
height: auto;
}
Dodaj film wideo do przykładowej strony internetowej
Chcemy dodać wideo na naszej przykładowej stronie internetowej. Rozmiar pliku wideo zostanie zmieniony tak, aby zawsze zajmował całą dostępną przestrzeń:
Przykład
video {
width: 100%;
height: auto;
}