Video Background — Complete guide

Video Background adds full-width video hero sections to the homepage and category pages of PrestaShop 8 and 9. The video is self-hosted on your server and played by the native HTML5 video tag: no YouTube or Vimeo call, no third-party cookies, nothing to add to your consent banner. The module ships with IntersectionObserver lazy loading, a mobile fallback image and a multilingual overlay (title, subtitle, button).

Installation

1. In the PrestaShop back office, open Modules > Module Manager and click Upload a module.
2. Select the dfvideobackground.zip file and confirm.
3. Click Configure: you land directly on the video section list.

Create your first video section

1. Click Add new video section.
2. Enter an internal name (never displayed on the front office).
3. Choose the placement: Homepage or Category page. For a category, pick it in the tree.
4. Upload your MP4 video (required) and, if available, the WebM variant (served first since it is lighter).
5. Add a poster image (displayed before the video loads) and a mobile fallback image. Without a mobile image, the poster is used.
6. Enter the title, subtitle, button label and button link in every shop language.
7. Save: the section goes live immediately if it is enabled.

Preparing an optimized video

The golden rule: a short loop (10 to 20 seconds), muted, without an audio track, under 5 MB. With ffmpeg:

# H.264 MP4, 1280px wide, no audio, streaming optimized
ffmpeg -i source.mov -an -vf "scale=1280:-2" -c:v libx264 -crf 28 -preset slow -movflags +faststart hero.mp4

# WebM VP9 variant (optional, lighter)
ffmpeg -i source.mov -an -vf "scale=1280:-2" -c:v libvpx-vp9 -crf 38 -b:v 0 hero.webm

Settings reference

Appearance

• Height: value + unit (vh or px). 60 vh by default.
• Overlay color and opacity: colored veil placed over the video to keep the text readable (black at 35% by default).
• Text color and content alignment (left / center / right).

Playback

• Autoplay: automatic playback, always muted (browser requirement).
• Loop: restarts the video continuously.
• Show player controls: displays the native player controls (disabled by default for a background look).

Performance

• Lazy loading: the video is only downloaded when the section approaches the viewport (200 px margin). Recommended.
• Mobile breakpoint: below this width (768 px by default), the fallback image replaces the video and the video file is never downloaded.

Front-office behavior: lazy loading, mobile, accessibility

• On desktop, video sources are injected when the section approaches the viewport, then playback starts; it automatically pauses when the section leaves the screen (battery and bandwidth savings).
• On mobile (below the breakpoint), only the fallback image is displayed: zero video bytes transferred, your mobile Core Web Vitals stay intact.
• If the visitor enabled prefers-reduced-motion, the autoplaying video is not downloaded: the poster image stays visible.
• The front-office script weighs about 4 KB of vanilla JavaScript, without jQuery.

GDPR

Unlike a YouTube or Vimeo embed, the video is served from your own domain: no cookie is set, no data is sent to any third party, no external request is made. There is therefore nothing to add to your consent banner or your processing register for this module.

Multistore and multilingual

• Each section is attached to the shop context in which it was created; in single-shop context, the list is filtered automatically.
• Title, subtitle, button label, link and image alt text are entered in every active language, directly in the form.

Troubleshooting

• The video does not appear on a category: check that your theme includes the displayContentWrapperTop hook in its layout (present in all Classic-based themes) and that the section is enabled and attached to the right category.
• The video does not autoplay: autoplay requires a muted video — the module enforces this, but some browsers block autoplay in battery-saving mode; the poster image then stays visible.
• Upload error: check the extension (mp4, webm, jpg, png, webp), the PHP upload_max_filesize limit and the permissions of the modules/dfvideobackground/uploads/ directory.
• The video plays on mobile: check the breakpoint value of the section; the fallback image only applies below that width.

Uninstallation

Uninstalling removes the module SQL tables, the files uploaded to the uploads directory and the admin tab. Export your videos beforehand if you want to keep them.