Responsywne wideo w tle strony
Jakiś czas temu pisałem o tym jak zrobić screenshot’a w html5, natomiast dzisiaj skupię się na efekcie, który jest coraz bardziej popularny w internecie. Mianowicie zaprezentuję, jak uzyskać responsywne tło w postaci wideo. Sprawa przy responsywnej grafice jest o tyle prostsza, że wystarczy użyć backround-image oraz background-size (cover/contain). A przy wideo?
ŁukaszPodziel się artykułem:
Wideo w tle
Wiele witryn mając klipy w tle dla wersji mobilnych po prostu podmienia je na responsywny, ale jednak statyczny obraz. Co jednak, gdy chcemy zaserwować wideo? Sprawa jest prosta. Używamy po prostu dobrodziejstw html5 w połączeniu z css.
Na początek umieśćmy nasze wideo na stronie:
<video>
<source src="my_video.webm" type="video/webm">
<source src="my_video.mp4" type="video/mp4">
</video>Niestety w standardzie nie rozciągnie się na całą szerokość strony, a jedynie osadzi się jako zwykły element. Tu z pomocą przyjdzie nam umiejętność pisania responsywnych elementów i pozycjonowanie ich na stronie.
Powyższy przykład nie sprawdzi się jednak na urządzeniach w trybie wertykalnym, ponieważ tło dopasuje się do szerokości ekranu i nie wypełni nam całej dostępnej przestrzeni.
Modyfikując nieco kod css uzyskamy następujący efekt:
Od razu lepiej.
Podsumowanie
Powyższe przykłady są jedynie propozycją, ponieważ jest jeszcze jeden sposób na uzyskanie podobnego efektu (object-fit: cover;), jednak to temat na przyszłość ze względu na niepełne wsparcie przeglądarek dla tej właściwości.
