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:
Film jako tło to fajne rozwiązanie wizualne strony. Przyciągnie uwagę większej ilości osób.