Les marchands sont de plus en plus nombreux à vouloir intégrer de la vidéo dans leurs fiches produits sous Prestashop. Découvrons ensemble une manière simple de le faire… propre et fonctionnelle.
Les vidéos YouTUBE c’est l’avenir du e-commerce
Sincèrement je suis très étonné, comme les vidéos YouTUBE sont encore sous-exploitées au niveau du e-commerce. On trouve encore trop rarement des démonstrations de produits sur des e-commerce. J’ai l’impression qu’on a d’un côté les YouTubeurs qui font de la pub et découvrir le produit aux internautes… et de l’autre côté le marchand qui est un peu en galère pour vendre ses produits.
C’est super important de penser d’intégrer de la vidéo dans ses fiches produits, c’est tellement plus vivant. Vous me direz peut-être « Oui mais moi mon marché c’est spécifique… ». Et bien raison de plus… enregistrez-vous en live, faites des vidéos amateurs unboxing… aucune importance de la qualité… Vous devez vous différencier des autres e-commerce et c’est maintenant qu’il faut prendre de vitesse les gros acteurs du marché.
N’attendez pas que dans 5 ans les référenceurs vous disent de faire de la vidéo… Vous manquez de trafic ? Pas assez de notoriété ? YouTube est là avec une large audience, vous trouverez à coup sûr un public. Si vous présentez tous vos produits en vidéo… vous aurez un référencement de « fou » c’est clair… oui c’est un temps énorme à passer, mais c’est à la portée de tous… c’est plus de la volonté plutôt que de la technique.
Allez, je vous défie ! Démarrez la semaine prochaine votre chaîne YouTUBE et filmez deux produits en vidéo chaque semaine, que vous allez poster sur votre chaine et intégrer à vos fiches. Soyez « cool » les internautes vous aimeront pour la personne que vous êtes !
Ressources
Pour ce tutoriel vous aurez à disposition :
- L’exemple de fichier « custom.css » avec les règles iframe YouTube.
Résumé de la vidéo : ajouter des vidéos YouTube sur Prestashop
- Quelques informations générales sur la puissance de YouTube.
- Autoriser les iframes dans le code Prestashop.
- Intégrer une notion responsive simple avec une nouvelle règle CSS.
- Améliorer le responsive avec la div « video-container ».
- Suggestions d’emplacements pour l’intégration de vidéos YouTube.
Bonsoir,
Ou ce trouve le fichier pour la version 1.6 de Prestashop ?
Merci
Bonjour,
Ce tutoriel concerne Prestashop 1.7, pour la version 1.6 il faut procéder autrement… essayez de regarder cette vidéo : https://www.youtube.com/watch?v=PhRjjuRwlQM
A bientôt !
Bonjour,
Merci pour ce super tuto, une question par rapport à l’emplacement de la video: cette méthode est très pratique pour intégrer une video dans la description, mais je voudrais intégrer la vidéo sous la photo du produit, donc à un endroit qui n’est pas accessible via la fiche produit en B.O.
La seule solution à laquelle je pense (je ne suis pas développeur, on va vite s’en apercevoir…) c’est de blinder le product.tpl avec toutes les vidéos des produits et mettre des conditions pour les afficher en fonction de l’ID du produit. Mais ça me paraît vraiment lourdingue comme option, non ?
Bonjour,
La méthode que vous mentionnez est tout à fait envisageable, elle ne va pas surcharger Prestashop, c’est plutôt en terme de « gestion » que cela n’est peut-être pas pratique (mais c’est une solution viable). Sinon il faudra trouver un module d’inclusion de vidéo qui se greffe sur cette zone (mais je ne suis pas certain que ça existe).
A bientôt !
Bonjour,
Au final j’ai effectivement opté pour un module sinon ça va vite devenir ingérable. Il n’y a pas de module pour 1.7 qui permette de greffer une video sur cette zone mais heureusement on trouve des developpeurs sympas qui font la modif pour obtenir ce résultat.
Quand même je suis content de savoir que ma solution « artisanale » était viable 🙂
Bonjour,
Merci pour vos super tutos…
J’ai intégré mes vidéos en div sur les fiches produits
https://www.videoson.eu/groupes-honda-inverter/696-groupe-electrogene-ultra-portable-honda-eu22i-230v-2200-va-50-hz-12-v-8-a-inverter.html
… mais j’aimerai que les clients puissent l’agrandir en plein écran…
J’ai essayé « allowfullscreen » sans succès…
Merci encore
Bertrand
Bonjour,
Quand les clients cliquent sur « play » ensuite en bas à droite ils peuvent l’agrandir (j’ai pu le faire sur votre lien).
A bientôt !
Bon, j’avais laissé un commentaire hier soir, mais manifestement il y a eu un souci à l’enregistrement, donc je recommence :
TADA….
Ma première vidéo Youtube sur Presta est en ligne depuis hier soir grâce à super Webbax :
https://www.sauvagnat.shop/p/56-stearine-en-poudre
J’ai longtemps hésité avant de me lancer dans la vidéo, pensant que c’était compliqué et j’avais tort : en fait, grâce à ce tuto, c’est limpide. Bon, après essais, j’ai utilisé la première méthode (forcer la vidéo à 100 % de sa largeur), pour l’encapsulation il faut que je pousse un peu plus loin.
Maintenant, y’a plus qu’à tourner des videos, ce sera pas le plus simple…
Encore merci Webbax, un tuto magnifique de plus.
Bonne journée à tous.
Bonjour,
C’est déjà un bon premier pas d’avoir intégré la vidéo (félicitation). Je vous encourage à faire aussi « vos propres » vidéos, car les internautes aiment le nouveau contenu exclusif.
A bientôt !
Merci de cette réactivité, c’est déjà une belle leçon à recevoir…
Oui, tout à fait d’accord pour mes propres vidéos. Hier j’ai juste fait le premier pas, bien plus facilement que je ne redoutais. Un galop d’essai sur un seul pas, c’est juste un peu court…
Donc maintenant le plus dur reste à faire : dégager du temps pour démarrer le(s) tournage(s), et là j’ai tout à apprendre…
En tous cas, avis aux autres lecteurs de cette page : franchement n’hésitez pas, les conseils sont bons et çà n’est pas si difficile; et puis çà fait du bien de voir un résultat positif, çà booste le moral pour continuer le dév du site et explorer d’autres pistes. Donc : foncez !!!
Merci Webbax, à bientôt pour d’autres aventures.
Bonjour Germain,
Je suis en train de préparer mon site de e-commerce grâce à vous en grande partie et je vous en remercie.
J’intègre dans mes fiches produits les vidéos de youtube de la marque permettant la compréhension des utilisations des produits vendus.
Je me bats comme un beau diable pour essayer d’intégrer comme règle de démarrage automatique des sous-titres en français à la lecture de la vidéo sans succès.
J’ai comme de bien entendu essayé en rajoutant de code « &hl=fr&cc_lang_pref=fr&cc_load_policy=1 » dans l’iFrame de la vidéo sans aucun succès.
Avez-vous une solution ?
Bonjour,
Je n’ai pas eu l’occasion de tester ces paramètres pour savoir s’ils fonctionnent ou non… à voir peut-être plutôt du côté des forums anglais concernant YouTUBE pour avoir la confirmation du fonctionnement (en 2019).
A bientôt !
Bonjour à tous
Pourriez vous me donner votre opinion sur l’intégration de vidéo dans les fiches produits mais dans la partie image produit ( comme sur ce lien de module https://addons.prestashop.com/fr/video-musique/18091-videos-pour-les-produits-youtube-vimeo.html) , avant d’investir et de me lancer dans cette idée je souhaiterais savoir si c’est une bonne chose techniquement et pour le confort de navigation de mes clients.
Merci d’avance
Bonjour,
Oui j’ai déjà utilisé ce module Prestashop pour inclure des vidéos, c’est une solution rapide & simple qui fonctionne très bien.
A bientôt !
Bonjour Webbax.
Tout d’abord merci, tous tes tutos me sont précieux. Je n’arrive pas à tous les exécuter mais je tente et j’apprends.
Sur ce tuto je tente d’intégrer ma propre vidéo, sans aller dans le css mais uniquement dans le BO ( plus mon domaine ).
Mon problème se trouve sur le fait que mon site presta 1.7.6 ne la retranscris pas sur mobile si je l’insère dans « short description » mais si je la place dans description elle apparaît bel et bien…
Y aurait il une manip en BO pour résoudre cela ?
Bon j’ai contourné le problème mais c’est juste question de savoir si je peux améliorer ça.
Merci encore pour ton temps.
Hervé
Bonjour,
Il est possible que sur votre thème, il y ait des règles CSS qui mentionnent… « masquer ce contenu » sur mobile. Idéalement je poserais la question à l’auteur du thème Prestashop pour qu’il puisse vous confirmer cela (si vous n’utilisez pas le template original).
A bientôt !
Super, merci de ta réponse, je vais me renseigner.
A bientôt
Hervé
Bonjour,
Merci beaucoup pour ces supers tutos.
J’ai essayé en vain d’intégrer une vidéo que ce soit dans la partie résumé ou description longue, mais elle ne s’affiche jamais. Quand j’examine le code de la page, celui concernant l’intégration de l’iframe n’y est pas. Quand j’insère le code directement par le biais de l’inspecteur du navigateur (F12) cela fonctionne (quelque soit le navigateur). J’ai bien activé les iframe dans le backoffice. Avez-vous connaissance du problème?
Merci encore pour votre travail.
Cordialement:
Dany.
Bonjour a tous,
j’ai une question plutôt administrative,
est ce que se légal d’intégrer une video youtube sur ça boutique?
Bonjour,
Vous pouvez le faire, c’est surtout si vous « copiez » la vidéo sur votre propre chaine YouTUBE, dans ce cas il faut avoir l’autorisation de l’auteur de la vidéo.
A bientôt !
Bonjour Webbax,
avec la méthode que tu as démontré, la vidéo YouTube s’affiche bien sur mobile mais sur le PC le carrée de la video YouTube est trop balaise. Saurais tu me dire comment faire pour diminuer la taille sur PC et garder le « width 100% » sur mobile ?
merci par avance