Vimeo Video Showcase - Slider responsive et lightbox, miniatures automatiques

Une vidéo qui renvoie vers Vimeo est une vidéo qui fait perdre la vente

Les vidéos produit, les tutoriels et les films de marque font vendre — mais seulement tant que le client est encore dans votre boutique. Ce module l'y garde : les vidéos prennent place dans un slider sur votre page d'accueil, et un clic ouvre une lightbox par-dessus la page plutôt qu'un nouvel onglet sur vimeo.com.

Collez un lien. C'est toute l'installation.

• 1. Copiez le lien de la vidéo depuis la barre d'adresse ou le bouton Partager de Vimeo.
• 2. Collez-le dans « Add a video » et cliquez sur Ajouter. Un aperçu s'affiche dès que le lien est reconnu.
• 3. Il n'y a pas de troisième étape — la miniature et le titre viennent automatiquement de Vimeo, et le slider est déjà en ligne sur votre page d'accueil.

Laissez le titre vide et c'est le titre Vimeo de la vidéo qui est repris. Tous les formats de lien sont acceptés : vimeo.com/…, player.vimeo.com/video/…, les liens de chaîne, de groupe et de showcase, et même un simple identifiant de vidéo.

Des vidéos non répertoriées, sans les rendre publiques

Collez le lien privé complet — celui qui comporte un code supplémentaire après le numéro — et la vidéo est lue dans votre boutique tout en restant masquée sur Vimeo. C'est exactement ce qu'il vous faut pour des tutoriels, du contenu réservé aux clients ou tout ce qui n'est pas prêt pour une chaîne publique.

Une lightbox, pas un détour

Les vidéos s'ouvrent dans une surcouche épurée, que l'on ferme d'un clic ou avec la touche Échap, et sont lues dans le mode Do-Not-Track de Vimeo (dnt=1). Le défilement automatique du slider se met en pause pendant la lecture d'une vidéo et lorsque l'onglet du navigateur passe en arrière-plan : rien ne bouge derrière le lecteur.

Un slider qui se tient bien sur tous les écrans

Choisissez le nombre de vidéos affichées par ligne sur ordinateur, de une à huit ; le slider en montre automatiquement quatre au maximum sur les petits écrans d'ordinateur, trois sur tablette et deux sur mobile, avec un balayage tactile natif. Les flèches et les points sont optionnels, et disparaissent d'eux-mêmes lorsque toutes les vidéos tiennent déjà à l'écran. La vitesse de défilement et la pause au survol sont réglables.

Un contrôle vidéo par vidéo, et langue par langue

La liste « Your videos » vous permet de réordonner les vidéos avec les flèches haut et bas, d'en masquer une en un clic, de la modifier ou de la supprimer. Chaque vidéo peut être réservée à une seule langue de la boutique ou affichée pour tout le monde — pratique quand un tutoriel n'existe qu'en allemand, ou quand un film de campagne ne concerne qu'un seul marché. Les vidéos dont la langue a été retirée de la boutique par la suite sont signalées : vous pouvez leur en réattribuer une au lieu de les voir disparaître sans prévenir.

Léger par conception

Pas de jQuery. Pas de slick, pas de plugin modal-video, aucune bibliothèque externe, aucune clé API. Un petit fichier CSS et un petit fichier de code, chargés uniquement lorsqu'il y a quelque chose à afficher, avec un cache invalidé par le numéro de version du module : les mises à jour arrivent chez les visiteurs de retour sans qu'ils aient à forcer le rafraîchissement.

Ce que la version 2.0 a corrigé

Les anciennes versions chargeaient jQuery 1.10 depuis un CDN sur chaque page, se greffaient à la fois sur header et sur displayHeader — d'où des fichiers appelés deux fois —, laissaient les URL vides produire des diapositives grises cassées et embarquaient une page de configuration qui plantait sur les versions récentes de PrestaShop. Tout cela a disparu, par conception : plus la moindre trace de jQuery, chaque enregistrement validé et redirigé, et impossible d'enregistrer une vidéo sans lien Vimeo valide. La mise à jour migre automatiquement vos vidéos existantes — les identifiants sont extraits, les miniatures récupérées à nouveau, et toute ancienne diapositive sans vidéo valide est conservée et marquée Hidden plutôt que supprimée.

Compatibilité

PrestaShop 1.7, 8 et 9, en huit langues : allemand, anglais, espagnol, français, italien, néerlandais, polonais et turc. Le slider se greffe sur displayHome à l'installation, s'affiche sur n'importe quel hook d'affichage si vous le déplacez depuis Design → Positions, et peut être placé directement dans un template avec {widget name='vimeoslider'}. La désinstallation supprime la table et les réglages du module — vos vidéos sur Vimeo, elles, restent intactes.

Questions fréquentes

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

Non. Collez le lien : le module récupère lui-même la miniature et le titre.

Puis-je utiliser des vidéos non répertoriées ?

Oui — collez le lien privé complet, code après le numéro de la vidéo compris, et elle est lue dans votre boutique tout en restant non répertoriée sur Vimeo.

Où la vidéo est-elle lue ?

Dans une lightbox par-dessus votre page, que l'on ferme d'un clic ou avec la touche Échap : le client ne quitte jamais la boutique.

Combien de vidéos s'affichent à la fois ?

Vous choisissez entre une et huit par ligne sur ordinateur ; les tablettes et les mobiles en reçoivent automatiquement moins, avec le balayage tactile.

Une vidéo peut-elle être réservée à une seule langue ?

Oui. Chaque vidéo peut être limitée à une seule langue de la boutique ou affichée pour tout le monde.

Puis-je placer le slider ailleurs que sur la page d'accueil ?

Oui. Déplacez-le ou copiez-le vers n'importe quel hook d'affichage depuis Design → Positions, ou placez-le dans un template avec {widget name='vimeoslider'}.

Une miniature s'affiche comme un cadre sombre — que faire ?

Vimeo n'a pas répondu lorsque le module l'a interrogé. Ouvrez le formulaire de modification de la vidéo et cliquez sur « Update video », puis vérifiez que la vidéo n'est pas privée ; pour les vidéos non répertoriées, le lien privé complet est indispensable.