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 prostrza, że wystarczy użyć backround-image oraz background-size (cover/contain). A przy wideo?

Responsywne wideo w tle strony

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 wertykanym, 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.

Powiadomienie cookies

Strona lukaszbacik.pl zapisuje pliki cookies na komputerach odwiedzających ją internautów. Czytaj więcej.