Video Background — Guide complet

Video Background ajoute des sections hero vidéo plein écran sur la page d’accueil et les pages catégories de PrestaShop 8 et 9. La vidéo est auto-hébergée sur votre serveur et lue par la balise vidéo HTML5 native : aucun appel à YouTube ou Vimeo, aucun cookie tiers, rien à ajouter à votre bannière de consentement. Le module intègre un lazy loading par IntersectionObserver, une image de repli sur mobile et un overlay multilingue (titre, sous-titre, bouton).

Installation

1. Dans le back-office PrestaShop, ouvrez Modules > Gestionnaire de modules puis cliquez sur Installer un module.
2. Sélectionnez le fichier dfvideobackground.zip et validez.
3. Cliquez sur Configurer : vous arrivez directement sur la liste des sections vidéo.

Créer votre première section vidéo

1. Cliquez sur Ajouter une section vidéo.
2. Renseignez un nom interne (jamais affiché sur le front).
3. Choisissez l’emplacement : Page d’accueil ou Page catégorie. Pour une catégorie, sélectionnez-la dans l’arborescence.
4. Téléversez votre vidéo MP4 (obligatoire) et, si vous en avez une, la variante WebM (servie en priorité car plus légère).
5. Ajoutez une image poster (affichée avant le chargement de la vidéo) et une image de repli mobile. Sans image mobile, le poster est utilisé.
6. Saisissez le titre, le sous-titre, le libellé et le lien du bouton dans chaque langue de la boutique.
7. Enregistrez : la section est en ligne immédiatement si elle est active.

Préparer une vidéo optimisée

La règle d’or : une boucle courte (10 à 20 secondes), muette, sans piste audio, de moins de 5 Mo. Avec ffmpeg :

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

# Variante WebM VP9 (optionnelle, plus légère)
ffmpeg -i source.mov -an -vf "scale=1280:-2" -c:v libvpx-vp9 -crf 38 -b:v 0 hero.webm

Référence des réglages

Apparence

• Hauteur : valeur + unité (vh ou px). 60 vh par défaut.
• Couleur et opacité de la superposition : voile coloré posé sur la vidéo pour garantir la lisibilité du texte (noir à 35 % par défaut).
• Couleur du texte et alignement du contenu (gauche / centre / droite).

Lecture

• Autoplay : lecture automatique, toujours muette (exigence des navigateurs).
• Boucle : relance la vidéo en continu.
• Afficher les contrôles : affiche les contrôles natifs du lecteur (désactivé par défaut pour un rendu « background »).

Performance

• Chargement différé : la vidéo n’est téléchargée que lorsque la section approche du viewport (marge de 200 px). Recommandé.
• Point de rupture mobile : sous cette largeur (768 px par défaut), l’image de repli remplace la vidéo et le fichier vidéo n’est jamais téléchargé.

Comportement front : lazy loading, mobile, accessibilité

• Sur desktop, les sources vidéo sont injectées à l’approche du viewport puis la lecture démarre ; elle se met automatiquement en pause quand la section sort de l’écran (économie de batterie et de bande passante).
• Sur mobile (sous le breakpoint), seule l’image de repli est affichée : zéro octet vidéo transféré, vos Core Web Vitals mobiles sont préservés.
• Si le visiteur a activé prefers-reduced-motion, la vidéo en autoplay n’est pas téléchargée : l’image poster reste affichée.
• Le script front pèse environ 4 Ko, en JavaScript vanilla, sans jQuery.

RGPD

Contrairement à un embed YouTube ou Vimeo, la vidéo est servie depuis votre propre domaine : aucun cookie n’est déposé, aucune donnée n’est transmise à un tiers, aucune requête externe n’est émise. Vous n’avez donc rien à ajouter à votre bannière de consentement ni à votre registre des traitements pour ce module.

Multiboutique et multilingue

• Chaque section est rattachée à la boutique du contexte dans lequel elle a été créée ; en contexte mono-boutique, la liste est filtrée automatiquement.
• Titre, sous-titre, libellé du bouton, lien et texte alternatif de l’image se saisissent dans chaque langue active, directement dans le formulaire.

Dépannage

• La vidéo ne s’affiche pas sur une catégorie : vérifiez que votre thème inclut bien le hook displayContentWrapperTop dans son layout (présent dans tous les thèmes basés sur Classic) et que la section est active et rattachée à la bonne catégorie.
• La vidéo ne démarre pas automatiquement : l’autoplay exige une vidéo muette — le module force ce réglage, mais certains navigateurs bloquent l’autoplay en mode économie d’énergie ; l’image poster reste alors affichée.
• Erreur au téléversement : vérifiez l’extension (mp4, webm, jpg, png, webp), la limite PHP upload_max_filesize et les permissions du dossier modules/dfvideobackground/uploads/.
• La vidéo s’affiche sur mobile : contrôlez la valeur du point de rupture de la section ; l’image de repli s’applique sous cette largeur uniquement.

Désinstallation

La désinstallation supprime les tables SQL du module, les fichiers téléversés dans le dossier uploads et l’onglet d’administration. Exportez vos vidéos au préalable si vous souhaitez les conserver.