Projektowanie responsywnej strony internetowej - Wideo
- Poprzednia strona Obraz RWD
- Następna strona Moduł układu siatki CSS
Użycie właściwości width
Jeśli width Właściwość ustawiona na 100%, odtwarzacz wideo będzie reagował i skalował się:
Przykład
video {
width: 100%;
height: auto;
}
Proszę zauważyć, że w powyższym przykładzie, odtwarzacz wideo może być powiększony do większego rozmiaru niż jego oryginalny. W wielu przypadkach lepszym rozwiązaniem jest użycie właściwości max-width.
Użycie właściwości max-width
Jeśli ustawisz max-width Właściwość ustawiona na 100%, odtwarzacz wideo będzie skalowany proporcjonalnie, ale nigdy nie zostanie powiększony do większego rozmiaru niż jego oryginalny:
Przykład
video {
max-width: 100%;
height: auto;
}
Dodanie wideo do strony przykładowej
Chcemy dodać wideo do strony przykładowej. Wideo będzie dostosowywane do rozmiaru, aby zawsze zajmować wszystkie dostępne przestrzenie:
Przykład
video {
width: 100%;
height: auto;
}
- Poprzednia strona Obraz RWD
- Następna strona Moduł układu siatki CSS
