Video Background: kompletny przewodnik

Video Background dodaje pełnoekranowe sekcje hero wideo na stronie głównej i stronach kategorii PrestaShop 8 i 9. Wideo jest hostowane na Twoim serwerze i odtwarzane przez natywny znacznik wideo HTML5: żadnych wywołań YouTube ani Vimeo, żadnych zewnętrznych cookies, nic do dodania w banerze zgód. Moduł zawiera lazy loading przez IntersectionObserver, obraz zastępczy na mobile i wielojęzyczny overlay (tytuł, podtytuł, przycisk).

Instalacja

1. W panelu administracyjnym PrestaShop otwórz Moduły > Menedżer modułów i kliknij Zainstaluj moduł.
2. Wybierz plik dfvideobackground.zip i zatwierdź.
3. Kliknij Konfiguruj: trafiasz bezpośrednio na listę sekcji wideo.

Tworzenie pierwszej sekcji wideo

1. Kliknij Dodaj sekcję wideo.
2. Wpisz nazwę wewnętrzną (nigdy nie wyświetlana na froncie).
3. Wybierz umiejscowienie: strona główna lub strona kategorii. Dla kategorii wskaż ją w drzewie.
4. Wgraj swoje wideo MP4 (obowiązkowe) i, jeśli je masz, wariant WebM (serwowany priorytetowo jako lżejszy).
5. Dodaj obraz poster (wyświetlany przed załadowaniem wideo) oraz obraz zastępczy dla mobile. Bez obrazu mobilnego używany jest poster.
6. Wpisz tytuł, podtytuł, etykietę i link przycisku w każdym języku sklepu.
7. Zapisz: sekcja jest online natychmiast, jeśli jest aktywna.

Przygotowanie zoptymalizowanego wideo

Złota zasada: krótka pętla (10 do 20 sekund), niema, bez ścieżki audio, poniżej 5 MB. Z ffmpeg:

# MP4 H.264, szerokość 1280px, bez audio, zoptymalizowany pod streaming
ffmpeg -i source.mov -an -vf "scale=1280:-2" -c:v libx264 -crf 28 -preset slow -movflags +faststart hero.mp4

# Wariant WebM VP9 (opcjonalny, lżejszy)
ffmpeg -i source.mov -an -vf "scale=1280:-2" -c:v libvpx-vp9 -crf 38 -b:v 0 hero.webm

Przegląd ustawień

Wygląd

• Wysokość: wartość + jednostka (vh lub px). Domyślnie 60 vh.
• Kolor i przezroczystość nakładki: kolorowa warstwa na wideo gwarantująca czytelność tekstu (domyślnie czerń 35%).
• Kolor tekstu oraz wyrównanie treści (lewo / środek / prawo).

Odtwarzanie

• Autoplay: automatyczne odtwarzanie, zawsze bez dźwięku (wymóg przeglądarek).
• Pętla: wznawia wideo w sposób ciągły.
• Pokaż kontrolki: wyświetla natywne kontrolki odtwarzacza (domyślnie wyłączone dla efektu „background”).

Wydajność

• Ładowanie odroczone: wideo jest pobierane dopiero, gdy sekcja zbliża się do viewportu (margines 200 px). Zalecane.
• Punkt graniczny mobile: poniżej tej szerokości (domyślnie 768 px) obraz zastępczy zastępuje wideo, a plik wideo nigdy nie jest pobierany.

Zachowanie front: lazy loading, mobile, dostępność

• Na desktopie źródła wideo są wstrzykiwane przy zbliżaniu do viewportu, po czym rusza odtwarzanie; pauzuje automatycznie, gdy sekcja opuszcza ekran (oszczędność baterii i pasma).
• Na mobile (poniżej breakpointu) wyświetlany jest tylko obraz zastępczy: zero bajtów wideo przesłanych, mobilne Core Web Vitals pozostają nienaruszone.
• Jeśli odwiedzający ma aktywne prefers-reduced-motion, wideo w autoplay nie jest pobierane: obraz poster pozostaje widoczny.
• Skrypt front waży około 4 KB, w vanilla JavaScript, bez jQuery.

RODO

W przeciwieństwie do embedów YouTube czy Vimeo, wideo jest serwowane z Twojej własnej domeny: żadne cookie nie jest zapisywane, żadne dane nie trafiają do stron trzecich, żadne zewnętrzne żądanie nie jest wysyłane. Nie musisz więc niczego dodawać do banera zgód ani do rejestru czynności przetwarzania dla tego modułu.

Multisklep i wielojęzyczność

• Każda sekcja jest przypisana do sklepu kontekstu, w którym została utworzona; w kontekście jednosklepowym lista filtruje się automatycznie.
• Tytuł, podtytuł, etykieta przycisku, link i tekst alternatywny obrazu wpisuje się w każdym aktywnym języku, bezpośrednio w formularzu.

Rozwiązywanie problemów

• Wideo nie wyświetla się na kategorii: sprawdź, czy Twój motyw zawiera hook displayContentWrapperTop w layoucie (obecny we wszystkich motywach opartych na Classic) i czy sekcja jest aktywna oraz przypisana do właściwej kategorii.
• Wideo nie startuje automatycznie: autoplay wymaga niemego wideo, moduł wymusza to ustawienie, ale niektóre przeglądarki blokują autoplay w trybie oszczędzania energii; wtedy pozostaje widoczny obraz poster.
• Błąd przy wgrywaniu: sprawdź rozszerzenie (mp4, webm, jpg, png, webp), limit PHP upload_max_filesize oraz uprawnienia folderu modules/dfvideobackground/uploads/.
• Wideo wyświetla się na mobile: skontroluj wartość punktu granicznego sekcji; obraz zastępczy obowiązuje tylko poniżej tej szerokości.

Deinstalacja

Deinstalacja usuwa tabele SQL modułu, pliki wgrane do folderu uploads oraz zakładkę administracyjną. Wyeksportuj wcześniej swoje wideo, jeśli chcesz je zachować.