Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML] Responsive HTML5 background video
Forum PHP.pl > Forum > Po stronie przeglądarki
d4ng
Witajcie chciałbym Was prosić o rzucenie okiem na poniższy kod. Czy waszym zdaniem jest oki, jak nie to jak go udoskonalić? Zależy mi na tym aby tłem strony było nagranie video oraz żeby całość była responsywna. Jeżeli dana przeglądarka nie obsługuje takiego bajeru to ma sie pokazać normalne tło np. bg.png. Jak to zrobić?

  1. </head>
  2.  
  3. <div id="big-video-wrap">
  4. <video width="100%" autoplay loop muted>
  5. <source src="images/intro.mp4" type="video/mp4">
  6. </video>
  7. </div>
  8. <div class="video-pattern"></div>
  9. <div id="content">


Arkusz styli:

  1. body {
  2. font-family: 'Times New Roman', sans-serif;
  3. color: #fff;
  4. }
  5. #big-video-wrap {
  6. overflow: hidden;
  7. position: absolute;
  8. height: 100%;
  9. width: 100%;
  10. top: 0;
  11. left: 0;
  12. z-index: -11;
  13. }
  14. .video-pattern {
  15. position: absolute;
  16. z-index: -1;
  17. top: 0;
  18. left: 0;
  19. width: 100%;
  20. height: 100%;
  21. background: rgba(0,0,0, 0.2) url(images/cien.png);
  22. }
qbas-s
ja przy tego typu pomysłach wzoruję się na fragmencie strony http://www.ghibli.maserati.com/. Tam jest to fajnie responsywnie zrobione
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.