Vitrine vidéo YouTube - Slider responsive, lightbox et vignettes automatiques

Vos vidéos existent déjà. Mettez-les sur la boutique.

Démonstrations produit, unboxings, tutoriels, films de marque : le travail est fait et les vidéos dorment sur YouTube. Ce qui manque, en général, c'est un moyen correct de les afficher en boutique — sans téléverser les vignettes à la main, sans expédier le client sur YouTube en pleine visite, et sans traîner une bibliothèque de slider et une copie de jQuery sur chaque page.

Collez un lien. C'est toute la configuration.

Copiez n'importe quelle adresse YouTube — depuis la barre du navigateur ou le bouton Partager —, donnez un titre à la vidéo, collez le lien et enregistrez. Dès que le lien est reconnu, le formulaire Ajouter une vidéo affiche la vignette récupérée directement depuis YouTube ainsi qu'une coche verte accompagnée de l'identifiant vidéo analysé : vous voyez qu'il a bien compris le lien avant de valider. Aucune image à téléverser, aucune clé API.

Tous les formats de lien sont acceptés : youtube.com/watch?v=…, la forme courte youtu.be/…, les Shorts, les liens embed, les liens live, et même un simple identifiant vidéo de 11 caractères. Ce qui n'est pas accepté, c'est un lien de playlist ou de chaîne, car ni l'un ni l'autre n'identifie une vidéo unique — et le formulaire vous le dit plutôt que d'enregistrer quelque chose de cassé.

La vidéo se lit sur votre page, pas sur celle de YouTube

Un clic sur une vignette ouvre la vidéo dans une lightbox sans distraction par-dessus votre boutique, que l'on referme d'un clic ou avec la touche Échap. Elle utilise le lecteur no-cookie de YouTube, renforcé pour la vie privée : un visiteur qui ne lance aucune vidéo n'est pas pisté par celui-ci.

Un slider qui gère seul les petits écrans

Choisissez le nombre de vidéos par ligne sur ordinateur — de une à huit. Ce nombre est un maximum, pas un compte fixe : en dessous de 992 px le module le plafonne à quatre, en dessous de 768 px à trois, et en dessous de 576 px à deux, avec défilement tactile natif. Aucun point de rupture à configurer, et pas de rangée de huit timbres-poste sur un téléphone.

Les flèches et les points de navigation sont optionnels, et tous deux se masquent automatiquement lorsque toutes les vidéos tiennent déjà à l'écran — pas de flèches inertes à côté d'un slider qui n'a rien à faire défiler.

Une lecture automatique qui sait s'arrêter

La lecture automatique fait défiler les vidéos au rythme que vous fixez, et elle se met en pause quand il le faut : lorsque la souris du visiteur survole le slider, lorsqu'une vidéo est réellement en cours de lecture dans la lightbox, et lorsque l'onglet du navigateur passe en arrière-plan. Un slider qui continue d'avancer derrière la vidéo que quelqu'un regarde est pire que pas de lecture automatique du tout.

Une liste de vidéos réellement gérable

La liste Vos vidéos vous donne des flèches haut et bas pour l'ordre, un badge Visible sur lequel vous cliquez pour masquer ou afficher une vidéo, et la modification ou la suppression sur chaque ligne. Chaque vidéo peut être réservée à une seule langue de la boutique ou affichée à tout le monde — pratique quand le tutoriel allemand n'a rien à faire sur la vitrine française. Une vidéo dont la langue a depuis été retirée de la boutique est signalée Langue supprimée et masquée, plutôt que de disparaître en silence sans explication.

Assez léger pour se faire oublier

Un petit fichier CSS et un petit fichier JavaScript, chargés uniquement lorsqu'il y a quelque chose à montrer. Pas de jQuery, pas de slick, pas de colorbox, rien qui vienne d'un CDN. Les ressources front-office sont versionnées avec la version du module : une mise à jour atteint les visiteurs de retour sans demander à quiconque de vider son cache.

Chaque diapositive est un véritable lien vers la vidéo, que le script transforme ensuite en lightbox — si JavaScript échoue ou se trouve désactivé, les vignettes continuent donc de fonctionner comme de simples liens au lieu de devenir des images mortes.

Placez-le où vous voulez

Le slider s'affiche par défaut sur la page d'accueil via displayHome. Déplacez-le ou copiez-le vers n'importe quel autre hook d'affichage depuis Design → Positions, ou insérez-le directement dans un template de thème avec {widget name='youtubeslider'}.

Ce que les versions 2.0.x ont corrigé

La version 1.x chargeait jQuery deux fois depuis un CDN, sa page de configuration échouait purement et simplement sur les versions récentes de PrestaShop, actualiser la page après un enregistrement dupliquait les vidéos, et une URL vide produisait une diapositive grise cassée. Tout cela a disparu par conception : le module n'utilise plus du tout jQuery, chaque enregistrement est validé puis redirigé, et une vidéo ne peut pas être enregistrée sans lien YouTube valide.

La série 2.0.x a ensuite corrigé trois vrais problèmes de thème : le slider qui s'étendait sur toute la largeur du navigateur sur les zones d'accueil pleine largeur comme celle de Hummingbird (désormais limité à la largeur de contenu du thème et centré), la barre de défilement horizontale provoquée par sa flèche suivante, et un débordement sur mobile dans les zones de hook en CSS Grid, où le conteneur se dimensionnait sur son contenu non défilé au lieu de la fenêtre. La version 2.0.2 a également corrigé une mise à jour qui pouvait désactiver le module lorsqu'un seul enregistrement de hook renvoyait false.

Compatibilité

PrestaShop 1.7, 8 et 9, en huit langues : allemand, anglais, espagnol, français, italien, néerlandais, polonais et turc. Fonctionne avec tous les thèmes, sans jQuery ni bibliothèque externe. La mise à niveau depuis la 1.x migre vos vidéos automatiquement — les identifiants sont extraits des URL enregistrées, et toute ancienne diapositive sauvegardée sans URL valide est conservée mais marquée Masqué, pour que vous puissiez la corriger au lieu de la perdre. La désinstallation supprime la table et les réglages du module ; vos vidéos sur YouTube restent bien entendu intactes.

Questions fréquentes

Ai-je besoin d'une clé API YouTube ?

Non. Les vignettes proviennent directement des adresses d'images de YouTube : rien à enregistrer, aucun quota à épuiser.

Quels formats de lien fonctionnent ?

Tous les formats habituels : watch?v=, youtu.be, Shorts, liens embed et live, ou un simple identifiant vidéo. Les liens de playlist et de chaîne ne fonctionnent pas, car ils n'identifient pas une vidéo unique.

Le visiteur quitte-t-il ma boutique pour regarder la vidéo ?

Non. La vidéo s'ouvre dans une lightbox par-dessus votre page, avec le lecteur no-cookie de YouTube, et se referme d'un clic ou avec la touche Échap.

Comment se comporte-t-il sur un téléphone ?

Il réduit tout seul le nombre de vidéos par ligne — plafonné à quatre en dessous de 992 px, trois en dessous de 768 px et deux en dessous de 576 px — et prend en charge le défilement tactile natif. Votre réglage est le maximum sur ordinateur ; vous n'avez aucun point de rupture à configurer.

Puis-je afficher des vidéos différentes selon la langue ?

Oui. Chaque vidéo est soit réservée à une langue de la boutique, soit affichée dans toutes les langues.

Ma vignette est une image grise générique. C'est l'image que YouTube renvoie pour une vidéo privée, supprimée ou tout juste mise en ligne. Vérifiez que la vidéo est publique et accessible.

Une vidéo refuse de se lire dans la lightbox. Son propriétaire a désactivé l'intégration sur YouTube. Il s'agit d'une restriction côté YouTube, et la lightbox affiche alors le message de YouTube lui-même.

Puis-je déplacer le slider hors de la page d'accueil ?

Oui, depuis Design → Positions vers n'importe quel hook d'affichage, ou avec {widget name='youtubeslider'} où vous voulez dans votre thème.