Film jako tło

Popularne jest od dłuższego czasu ustawianie jako tło całej strony internetowej bądź jej większego fragmentu zdjecia w wysokiej rozdzielczości. Efekt jest ciekawy dla oka, ale przecież można pójść krok dalej. A gdyby tak ustawić animację w tle? Albo nawet film z YouTube’a?

Pomysł jest bardzo prosty – pływająca ramka z odtwarzaczem musi zostać wypozycjonowana absolutnie wewnątrz div-a z zawartością, a jej wymiary powinny obejmować 100% wysokości i szerokości rodzica.

Z tym nie powinno być problemu dla każdego, kto podstawy CSS zna, wystarczy ustawić odpowiednie position, top, left, width, height w CSS. Dla estetyki powinniśmy również ukryć pasek z wyświetlaniem czasu filmiku, a dla funkcjonalności niezbędne jest sprawić, by wideo zostało zapętlone i odtwarzało sie automatycznie po załadowaniu strony.

Wszystko to ustawimy używając odpowiednich parametrów w adresie URL, który będzie prowadził do naszego odtwarzacza. Po pobraniu kodu wprosy z YT lub mojego przykładu (spójrz niżej) należy przede wszystkim ustawić:

  • modestbranding: 1
  • autoplay: 1
  • loop: 1
  • controls: 0
  • playlist: ID filmu

Mój efekt końcowy oraz gotowy kod HTML i CSS poniżej:

Komentarze: 1 do “Film jako tło”

Skomentuj

CommentLuv