Prestashop 1.7
Difficulté 1/4
Durée 15′
Vous chercher à étoffer vos descriptions de produits sur Prestashop en ajoutant une vidéo hébergée sur une plateforme (Youtube, Viméo, Odysee, Crowdbunker…) ?
Vous devez intégrer une vidéo ! Mais qu’est ce que l’intégration? L’intégration vous permet d’afficher un contenu vidéo hébergé ailleurs par le biais d’un iframe. Vous n’avez pas à stocker cette vidéo, simplement à l’intégrer.
Elle peut être placée dans les onglets de description ( récapitulatif et description ) de vos fiches produits ou dans un nouveau champ si vous avez suivi notre tutoriel : ajouter un champ dans une fiche produit Prestashop.
Nous allons détailler les étapes à suivre et les astuces pour obtenir le rendu souhaité.
Étapes essentielles
pour aboutir à ce résultat il vous faut :
- modifier les paramètres du back-office pour intégrer une vidéo,
- Intégrer l’iframe dans le champ texte d’une fiche produit.
1/ Modifier les paramètres du back-office pour intégrer une vidéo
Deux modifications sont importantes pour permettre une intégration vidéo sur Prestashop.
1ère modification
La lecture des iframes, dans les champs texte de la fiche produit, n’est pas active d’origine, il faut l’autoriser.
Pour cela il faut aller dans paramètres de la boutique/paramètres généraux et basculer le paramètre « Autoriser les iframes dans les champs HTML » (4 ème paramètre) sur oui.
2ème modification
Afin de permettre à vos visiteurs de pouvoir visualiser cette vidéo en plein écran, il faut désactiver l’option « utiliser la bibliothèque HTML purifier » (5 ème paramètre).
En effet, cette dernière enlève certains attributs associé à l’iframe comme AllowFullScreen car il le considère comme du HTML non conforme.
Ci-dessous notre copie d’écran pour valider cette modification en 4 clics.
2/ Intégrer l’iframe dans le champ texte d’une fiche produit
Pour intégrer un iframe il vous suffit d’aller sur la plateforme vidéo de votre choix puis de cliquer sur partager et enfin sur intégrer. Vous pouvez maintenant copier le code de l’iframe.
Voici un exemple dans lequel nous utiliserons la plateforme vidéo Youtube.
Comme vous pouvez le constater sur l’étape 3, plusieurs paramètres sont proposés sous le code de l’iframe.
- Vous avez la possibilité de démarrer la vidéos, que vous partagerez, au moment le plus pertinent.
- Vous pouvez également afficher ou non les commandes du lecteur.
- Vous pouvez activer le mode confidentialité avancé pour que Youtube n’enregistre pas d’informations sur les visiteurs de votre site qui ne regarderaient pas la vidéo.
Allez maintenant dans votre back office Prestashop sur la fiche produit souhaitée et inséré le code de l’iframe dans le champ texte choisi grâce au bouton insérer/éditer une vidéo et l’onglet insérer.
Collez votre code, validez, et enregistrez bien-sûr votre fiche produit. Affichez votre fiche produit côté front office….votre vidéo est intégrée!!!
Voici un exemple des étapes décrite.
Conclusion
Vous savez désormais intégrer des vidéos par le biais d’un iframe. Vous allez surement constater que la vidéo intégrée n’est pas responsive. Afin de remédier à ce problème nous vous invitons à suivre notre tutoriel : : Comment rendre une vidéo intégrée responsive sur Prestashop ?
A la recherche de modules pour Prestashop
Vous avez besoin d’un module sur mesure ou d’un développement particulier ? N’attendez plus
A bientôt pour de nouveaux tutoriels avec Com’onsoft !