Vidéos de catégorie

Associez une vidéo à n'importe quelle catégorie et affichez-la sous forme de lecteur intégré ou de bandeau héros pleine largeur sur la page de catégorie — sans aucun code.

remarque

Disponible depuis la v3.2.0

Vue d'ensemble

Category Videos vous permet d'associer une vidéo par catégorie directement depuis le formulaire d'édition de la catégorie dans votre Back Office. Lorsqu'un client visite cette catégorie, la vidéo s'affiche automatiquement selon les paramètres d'affichage configurés dans le module. Vous choisissez, pour chaque catégorie, si la vidéo est présentée sous forme de lecteur intégré classique (inséré à un emplacement précis dans la page) ou comme une vidéo de fond cinématographique qui remplace l'image d'en-tête de la catégorie.

C'est particulièrement utile pour les vidéos de marque sur les catégories d'atterrissage, les promotions saisonnières ou les démonstrations de gammes de produits qui se lancent avant la grille de produits. Chaque catégorie étant configurée indépendamment, vous pouvez avoir une vidéo héros sur une catégorie de premier niveau tandis que les sous-catégories utilisent un lecteur intégré ou aucune vidéo du tout.

Deux niveaux de configuration fonctionnent ensemble : les paramètres globaux du module (qui contrôlent le comportement de toutes les vidéos de catégorie) et l'affectation par catégorie (qui associe une URL de vidéo spécifique et un mode d'affichage à chaque catégorie).

Configuration

Étape 1 — Activer la fonctionnalité

1. Accédez à Modules > Gestionnaire de modules, trouvez Product Video et cliquez sur Configurer.
2. Ouvrez l'onglet Category Videos.
3. Activez Activer les vidéos de catégorie sur Oui et cliquez sur Enregistrer.

Sans cet interrupteur principal activé, aucune vidéo de catégorie ne s'affiche, même si des vidéos sont déjà assignées aux catégories.

Étape 2 — Configurer les options d'affichage globales

Tous les paramètres ci-dessous se trouvent dans Modules > Gestionnaire de modules > Product Video > Configurer > Category Videos.

Paramètres du mode régulier (intégré)

Champ	Valeurs	Défaut	Description
Activer les vidéos de catégorie	Oui / Non	Non	Interrupteur principal pour toutes les vidéos de catégorie.
Position de la vidéo	Haut, Après la description, Après les sous-catégories, Après les produits, Sélecteur personnalisé	Haut	Emplacement d'insertion du lecteur intégré dans la page.
Sélecteur personnalisé	Chaîne de sélecteur CSS	(vide)	Visible uniquement lorsque Position de la vidéo est définie sur Sélecteur personnalisé. Entrez le sélecteur CSS de l'élément après lequel la vidéo doit apparaître.
Largeur de la vidéo normale	Nombre (px)	720	Largeur du lecteur intégré en pixels.
Hauteur de la vidéo normale	Nombre (px)	405	Hauteur du lecteur intégré en pixels.

Paramètres du mode fond (héros)

Ces options n'affectent que les catégories dont la vidéo est définie en mode Fond / héros.

Champ	Valeurs	Défaut	Description
Hauteur du fond	Nombre (px)	400	Hauteur de la section héros pleine largeur en pixels.
Couleur du calque	Sélecteur de couleur	#000000	Une teinte de couleur appliquée sur la vidéo. Définissez l'opacité à 0 pour la supprimer entièrement.
Opacité du calque	0–100 (%)	40	Opacité du calque de couleur. 0 = complètement invisible ; 100 = recouvre entièrement la vidéo.
Afficher le nom de la catégorie	Oui / Non	Oui	Affiche le nom de la catégorie en texte superposé à la vidéo de fond.
Afficher la description de la catégorie	Oui / Non	Non	Affiche la description de la catégorie en texte superposé à la vidéo de fond. Les descriptions longues sont tronquées à 200 caractères.

Le Sélecteur d'en-tête de catégorie sous Compatibilité de thème contrôle quel élément est remplacé par la vidéo de fond. La valeur par défaut (.page-category-heading,.category-cover) fonctionne avec le thème Classic et la plupart des thèmes standards. Si la vidéo de fond n'apparaît pas, c'est ce paramètre qu'il faut ajuster.

Étape 3 — Associer une vidéo à une catégorie

1. Accédez à Catalogue > Catégories dans le Back Office.
2. Cliquez sur Modifier pour la catégorie à laquelle vous souhaitez ajouter une vidéo.
3. Faites défiler jusqu'au panneau Vidéo en bas du formulaire de catégorie.
4. Saisissez l'URL de la vidéo (YouTube, Vimeo, ou l'URL directe d'un fichier vidéo).
5. Saisissez éventuellement un Titre — celui-ci s'affiche uniquement dans le panneau d'administration pour identification et n'est pas visible par les clients.
6. Choisissez le Mode d'affichage : Intégré (normal) ou Fond / héros.
7. Cliquez sur le bouton Enregistrer dans le panneau Vidéo, puis enregistrez le formulaire de catégorie.

Répétez l'opération pour chaque catégorie devant afficher une vidéo.

Fonctionnement

Lorsqu'un client ouvre une page de catégorie, le module vérifie si une vidéo a été associée à cette catégorie. Si c'est le cas, il affiche la vidéo selon le mode d'affichage choisi.

Mode intégré (normal)

La vidéo est initialement masquée dans le code source de la page, puis déplacée à la position correcte par un court script JavaScript qui s'exécute à l'événement DOMContentLoaded. La position est déterminée par le paramètre Position de la vidéo :

• Haut — inséré après le titre de la page, avant la description de la catégorie
• Après la description — inséré sous le bloc de description de la catégorie
• Après les sous-catégories — inséré sous la grille des sous-catégories
• Après les produits — inséré sous la liste des produits
• Sélecteur personnalisé — inséré après l'élément correspondant au sélecteur CSS que vous spécifiez

Le lecteur intégré respecte les valeurs de Largeur de la vidéo normale et de Hauteur de la vidéo normale configurées globalement. Les vidéos YouTube et Vimeo sont chargées via les gestionnaires de lecteur existants du module ; les fichiers vidéo HTML5 s'affichent avec les commandes natives du navigateur.

Mode fond (héros)

La vidéo de fond remplace la zone d'image d'en-tête de votre catégorie. Le module localise l'élément d'en-tête via le Sélecteur d'en-tête de catégorie dans les paramètres de compatibilité de thème, puis affiche la vidéo derrière un calque configurable et des étiquettes de texte optionnelles.

• Les vidéos de fond YouTube se lancent automatiquement, en mode silencieux, en boucle continue et sans contrôles visibles.
• Les vidéos de fond Vimeo utilisent le paramètre background=1 de Vimeo pour le même effet.
• Les fichiers vidéo HTML5 sont lus avec les attributs autoplay muted loop playsinline.

La vidéo est toujours mise à l'échelle pour couvrir toute la largeur du conteneur sans bandes noires, quelle que soit le format natif de la vidéo. Le recalcul s'effectue automatiquement lors du redimensionnement de la fenêtre.

Si aucune vidéo n'est assignée à une catégorie, rien n'est généré — ni conteneur vide, ni espace réservé.

Exemples d'utilisation

Exemple : Vidéo de présentation de marque sur une collection de premier niveau

Vous vendez du matériel outdoor et souhaitez diffuser un film de marque de 60 secondes en haut de votre catégorie « Randonnée ». Définissez le mode d'affichage sur Intégré (normal) avec Position de la vidéo sur Haut et des dimensions de 1140 × 641 px (correspondant à la colonne de contenu de votre thème). Les clients arrivent sur la page et voient le film avant la grille de produits, sans quitter la catégorie.

Exemple : En-tête saisonnier cinématographique sur une catégorie de vente

Pour une catégorie « Soldes d'été », vous souhaitez une vidéo de style plage en boucle à la place de l'image de catégorie statique. Assignez une URL YouTube avec le Mode d'affichage sur Fond / héros, définissez la Hauteur du fond à 500 px, activez Afficher le nom de la catégorie et réglez l'Opacité du calque à 50 pour que le texte « Soldes d'été » reste lisible sur la vidéo. L'image d'en-tête est automatiquement remplacée par la vidéo.

Exemple : Vidéo tutoriel après la liste des produits

Vous avez une catégorie « Machines à café » et souhaitez afficher une vidéo guide d'achat sous tous les produits. Définissez Position de la vidéo sur Après les produits et utilisez une URL Vimeo dans le panneau Vidéo de la catégorie. Les clients terminent de parcourir la grille de produits et voient ensuite le tutoriel.

Remarques importantes

• Une seule vidéo peut être assignée par catégorie. L'affectation d'une nouvelle URL à une catégorie qui en possède déjà une écrase l'entrée précédente.
• La fonctionnalité est compatible avec PrestaShop 1.6 et 1.7+. Sur 1.7+, elle utilise displayCategoryAdditionalDescription ; sur 1.6, elle utilise displayHeaderCategory. Les deux hooks font appel à la même logique de rendu.
• Le mode fond est conçu pour YouTube, Vimeo et les fichiers vidéo HTML5. Les fournisseurs personnalisés (configurés sous Fournisseurs supplémentaires) ne sont pas pris en charge en mode fond — ils reviennent à une iframe, qui peut ne pas remplir correctement le conteneur.
• Category Videos est une fonctionnalité par boutique. Si vous utilisez une configuration multi-boutique, les affectations de vidéos et les paramètres d'affichage globaux sont appliqués par contexte de boutique. Changez de boutique avant d'assigner des vidéos ou de modifier les paramètres pour vous assurer qu'ils prennent effet sur la bonne vitrine.
• Le calque de description en mode fond supprime les balises HTML de la description de catégorie et tronque à 200 caractères. Si la description de votre catégorie est formatée en HTML, le calque n'affichera que du texte brut.
• Si un sélecteur CSS personnalisé ne correspond à aucun élément de la page, la vidéo s'affiche quand même — elle apparaît à sa position de rendu par défaut dans le code source de la page plutôt que d'être repositionnée.

Résolution des problèmes

Problème	Solution
La vidéo n'apparaît pas sur la page de catégorie	Vérifiez que Activer les vidéos de catégorie est défini sur Oui dans les paramètres du module. Vérifiez également qu'une URL de vidéo est bien enregistrée sur cette catégorie spécifique (modifiez la catégorie et vérifiez le panneau Vidéo).
La vidéo de fond s'affiche mais couvre la mauvaise zone	Le Sélecteur d'en-tête de catégorie sous Compatibilité de thème ne correspond pas à l'élément d'en-tête de votre thème. Inspectez la page de catégorie avec les outils de développement de votre navigateur pour trouver le bon sélecteur CSS et mettez-le à jour.
Le lecteur intégré s'affiche à la mauvaise position	Votre thème utilise peut-être des noms de classes différents des valeurs par défaut. Passez Position de la vidéo sur Sélecteur personnalisé et entrez le sélecteur CSS exact du bloc de description ou du conteneur de liste de produits de votre thème.
La vidéo de fond ne se lance pas automatiquement	Les navigateurs exigent que les vidéos soient en mode silencieux avant d'autoriser la lecture automatique. Les fonds YouTube et Vimeo sont toujours mis en sourdine automatiquement. Pour les fichiers HTML5, l'attribut muted est défini par le module. Si la lecture automatique échoue toujours, vérifiez les paramètres de politique de lecture automatique de votre navigateur.
Le nom ou la description de la catégorie est illisible sur la vidéo	Augmentez l'Opacité du calque pour que la couche teintée crée davantage de contraste, ou changez la Couleur du calque pour une teinte qui s'harmonise mieux avec le contenu de votre vidéo.
Vidéo assignée mais le module vient d'être installé — rien ne s'affiche	Après l'installation ou la mise à jour du module, videz le cache PrestaShop depuis Paramètres avancés > Performances afin que les nouveaux templates soient pris en compte.

Foire aux questions

Puis-je utiliser une vidéo différente pour ordinateur et mobile ?

Non. La même URL de vidéo est utilisée quelle que soit la taille de l'écran. En mode fond, le module met la vidéo à l'échelle pour remplir le conteneur à n'importe quelle largeur de fenêtre, ce qui permet d'utiliser le même clip sur ordinateur et mobile.

La vidéo de catégorie s'affiche-t-elle dans les listes de produits de cette catégorie ?

Non. Category Videos apparaît uniquement sur la page de catégorie elle-même. Pour afficher des vidéos dans la grille de produits (sur les fiches produits), utilisez plutôt la fonctionnalité Listes de produits.

Que se passe-t-il si je supprime une catégorie à laquelle une vidéo est associée ?

L'affectation de vidéo est stockée avec une référence à l'identifiant de la catégorie. La suppression de la catégorie via le Back Office supprime l'enregistrement de la catégorie, et l'affectation de vidéo orpheline ne sera simplement jamais affichée (il n'y a plus de page de catégorie pour l'afficher). Cela ne provoque aucune erreur.

Puis-je assigner une vidéo à la catégorie d'accueil ou à la catégorie racine ?

Oui. Toute catégorie visible dans Catalogue > Catégories peut se voir assigner une vidéo via le panneau Vidéo de son formulaire d'édition, y compris la catégorie Accueil si votre thème la rend accessible comme page de catégorie navigable.

La vidéo de fond scintille ou affiche brièvement une image blanche avant de démarrer. Est-ce normal ?

Un court délai avant le chargement de la vidéo est normal, surtout sur les connexions lentes. Les vidéos YouTube et Vimeo nécessitent l'initialisation de l'API du lecteur externe. Vous pouvez réduire l'impact visuel en augmentant légèrement l'Opacité du calque, ce qui masque l'état vide avant l'apparition de la première image de la vidéo.

Puis-je afficher une vidéo sur toutes les catégories sans en assigner une individuellement ?

Non. Les vidéos doivent être assignées catégorie par catégorie. Il n'existe pas de vidéo de repli globale qui s'applique à toutes les catégories à la fois.

La vidéo de catégorie affectera-t-elle le référencement de ma page ?

Le module génère des éléments <iframe> et <video> standards — de la même manière que toute vidéo intégrée apparaîtrait. Aucun traitement SEO spécial ni balisage Schema.org n'est généré pour les vidéos de catégorie (cette fonctionnalité s'applique uniquement aux vidéos de produits).

Fonctionnalités associées

• Listes de produits — Afficher des vignettes vidéo ou des icônes sur les fiches produits dans la grille de catégorie
• Compatibilité de thème — Ajuster le Sélecteur d'en-tête de catégorie et d'autres sélecteurs CSS spécifiques au thème