Voici une demande assez régulière que l’on retrouve souvent sur le forum de prestashop. J’ai donc fait une petite vidéo expliquant comment intégrer une vidéo sur la page d’accueil de votre boutique à l’aide de mon module op’art multi html block.
Bonjour,
Aujourd’hui je vais vous expliquer comment intégrer une vidéo sur la page d’accueil de votre boutique Prestashop à l’aide du module Multi HTML bloc.
Donc le module je l’ai déjà installé sur cette boutique. Une fois votre module installé vous allez simplement créer votre bloc. Une fois votre bloc créé vous l’installez et une fois installée vous cliquez sur le bouton configurer.Donc là vous vous retrouvé dans l’interface du module en lui-même, pour récupérer le code de votre vidéo vous allez simplement sur YouTube ou Dailymotion ou Vimeo, le module acceptent ces trois plates-formes-là Vous sectionnez votre vidéo et vous cliquez sur l’icône partager puis sur intégrer et la vous obtenez le code de votre vidéo.Vous copiez ce code, vous retournez dans l’interface du module et vous cliquez sur l’icône HTML. Là vous coller le code que vous avez copié puis vous faites mettre à jour et vous sauvegardez.Une fois que vous avez fait ça, vous allez sur la page d’accueil de votre site et vous allez pouvoir voir votre vidéo.Alors là actuellement elle s’est positionnée automatiquement dans la colonne de gauche parce que le module Multi HTML bloc lorsque vous créez un nouveau bloc va le greffer automatiquement dans la colonne de gauche. Donc pour le placer dans la colonne centrale de votre page d’accueil vous retournez dans le module et vous cliquez sur gérer ses points d’accroche.Là dans un premier temps on va le supprimer de la colonne de gauche donc vous repérez left column block et votre module test vidéo et vous cliquez sur l’icône corbeille.Une fois que vous l’avez supprimé on va le greffer à la colonne centrale en cliquant sur le bouton greffer un module. Ici faut bien que test vidéo soit sectionnez et là vous recherchez le point d’accroche display Home qui correspond à la colonne centrale de la page d’accueil.
Vous rafraîchissez votre page et la vidéo est belle et bien en colonne centrale maintenant on peut vouloir qu’elle se positionne en premier par exemple. Pour ça il suffit de gérer les positions donc retourne dans la partie module position et au lieu de n’afficher que test vidéo ici on va cliquer sur tous les modules.
On va rechercher display Home, Home page content pardon et là on a le module test vidéo et les deux modules qui se trouvent au-dessus de lui donc on va le positionner en première position.
On retourne sur la page d’accueil on rafraîchit et là la vidéo est bel et bien en première position.
Deux choses encore que l’on peut régler c’est par exemple le fait de demander à ce que la vidéo démarre automatiquement et là on voit qu’elle dépasse un petit peu parce qu’elle est trop longue, donc on va corriger ce problème.
Donc pour ça on retourne dans l’administration, on retourne dans le module qu’on a précédemment créé. On clic sur le l’icône HTML et ici on va indiquer dans Width, on va indiquer une largeur un petit plus petite. Ici par exemple 550.
Etant donné qu’on a réduit la largeur il faut aussi réduire la hauteur pour pas déformer notre vidéo c’est simplement produit en croix. Donc ici ça donnera 309, je fais mettre à jour, sauvegarder et je rafraîchis ma page d’accueil. Et là, la vidéo rentre bien correctement dans la colonne centrale.
Enfin pour qu’elle démarre automatiquement vous retourner toujours de la même manière et ici vous avez SRC égal « le lien de votre vidéo » à la fin du lien de votre vidéo juste avant la fermeture des guillemets vous rajouter le symbole &autoplay=1.
Vous faites mettre à jour, sauvegarder, vous rafraîchissez la page d’accueil du site et là vous voyez que la vidéo se charge automatiquement et démarre.
Voilà, donc n’hésitez pas à consulter les autres vidéos que j’ai réalisées concernant ce module notamment celle qui permet d’ajouter un badge Google+ ou un badge Facebook ou encore une carte Google Maps.
N’hésitez pas à vous abonner à ma chaîne YouTube et à me suivre sur Google+ et enfin vos commentaires et vos avis sont toujours les bienvenus soient par l’intermédiaire de mon blog par l’intermédiaire du forum de Prestashop où vous pourrez retrouver un post pour chacun de mes modules ou dans les commentaires de cette vidéo merci !
Passionné d’e-commerce et de SEO, je suis le créateur du site reussir-mon-ecommerce.fr. Depuis plus de 15 années, j’aide les e-commerçants à développer sainement leur entreprise. Et si je ne suis pas devant mon écran, c’est que je suis derrière ma batterie à jouer du rock ! !
Salut Olivier, super ton module et ton tuto pour l’installer. Je suis un débutant de chez débutant et tout est bien expliqué.
Merci à toi j’intégrerai ton module sur mes autres sites ;).
Bonne soirée à toi !!
Bonsoir,
Votre module me plait beaucoup, par contre j’ai une problematique et j’espere que votre module peut me donner une reponse.
J’ai installé une vidéo en html sur le blocklayered de prestashop 1.6.3
Probleme, a chaque pigination, la vidéo se multiplie.
Est-ce que votre module peut aller sur cette emplacement et peut-il eviter qu’il y est lmultiplication des vidéos ?
Cordialement
Bonjour Moriceau,
on est bien d’accord que le blocklayered c’est la navigation à facette.
Comment avez-vous ajouter une vidéo sur ce module, car à priori ça n’est pas possible à moins de modifier le template du module.
Si votre objectif est de placer une vidéo au dessus de la navigation à facette, a priori c’est possible avec mon module.
Bonjour,
Est-il possible de créer et d’afficher un module dans la colonne de gauche avec la mise en forme originale de prestashop 1.6.1 ? comme par exemple sur votre site la catégorie « SERVICES » avec les sous-catégories « Optimisation des performances », « Dépannage et corrections », etc… en fait, je voudrais créer une catégorie « VIDEOS » avec en dessous les titres des vidéos et les liens youtube, en respectant la présentation Prestashop.
Merci,
JP Pelissier
Prodecoup
Bonjour Jean-pierre,
oui c’est possible, il faut juste appliquer les mêmes classes CSS que celle utilisée par votre thème.