# 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… - Page: - Langue: fr - Mis à jour le: 2026-07-16 - Autres langues: [en](https://www.datafirefly.com/en/documentation/dfvideobackground/index.md), [es](https://www.datafirefly.com/es/documentation/dfvideobackground/index.md), [de](https://www.datafirefly.com/de/documentation/dfvideobackground/index.md), [it](https://www.datafirefly.com/it/documentation/dfvideobackground/index.md), [pl](https://www.datafirefly.com/pl/documentation/dfvideobackground/index.md), [pt](https://www.datafirefly.com/pt/documentation/dfvideobackground/index.md), [nl](https://www.datafirefly.com/nl/documentation/dfvideobackground/index.md) - Index: 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. Le module s'installe sans aucun override du cœur ni du thème. Il enregistre les hooks `displayHome`, `displayContentWrapperTop` et `displayHeader`, crée deux tables SQL et un dossier `uploads/` protégé contre l'exécution PHP. ## 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. Vous pouvez créer autant de sections que nécessaire — une par catégorie, plusieurs sur la home — et les réordonner par glisser-déposer dans la colonne Position de la liste. ## 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 ``` La taille maximale d'upload est de 64 Mo par défaut (configuration `DFVB_MAX_VIDEO_MB`) mais reste limitée par les directives PHP `upload_max_filesize` et `post_max_size` de votre serveur. ## 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.