Prestashop 1.7
Difficulté 1/4
Durée 10′
Vous avez intégré une vidéo sur votre fiche produit Prestashop par vos propre moyen ou par l’intermédiaire de notre tutoriel : Comment intégrer une vidéo dans une fiche produit Prestashop ? mais elle n’est pas responsive ?
En effet lorsque l’on observe la page en simulant un écran de téléphone, on peut remarquer que la vidéo dépasse de l’écran.
Nous vous proposons deux solutions pour palier ce problème.
Solutions pour rendre votre vidéo responsive
- Modification des attributs de l’iframe.
- Ajout d’un container et de CSS à l’iframe.
1/ Modification des attributs de l’iframe
Il suffit modifier le code de l’iframe, et plus précisément sa « width » et sa « height ». Remplacez la valeur par un pourcentage pour la width (width = « 100% ») et modifiez la height en remplaçant la valeur par « auto » (height = »auto »). Il est possible que la modification ne soit pas sauvegardée. Dans ce cas, effacez l’iframe existant et recréé le en modifiant sa largeur et sa hauteur avant la sauvegarde de la fiche produit Prestashop,
Ci-dessous notre exemple imagé pour la mise en place de cette 1ère solution.
2/ Ajout d’un container et de CSS à l’iframe
La deuxième solution consiste à englober le code de l’iframe dans un conteneur et d’y appliquer du css.
Cette deuxième solution aura un meilleur visuel que la première solution proposée, voilà pourquoi nous vous la conseillons.
Pour se faire, retournez sur votre fiche produit dans le champ ou vous avez ajouté l’iframe. Cliquez sur l’icône « <> »(code source), une fenêtre contenant le code source du champ apparait.
Ajoutez la div conteneur en englobant votre iframe, comme indiqué dans le code suivant.
<div class="video-container"><iframe.......></iframe></div>
Enfin ajoutez le code css qui suit dans le fichier css de votre thème ici nous l’ajouterons dans le fichier custom.css. Si ce fichier n’existe pas, créez le dans le dossier assets\css de votre thème.
.video-container {
position:relative;
padding-bottom:56.25%;
padding-top:30px;
height:0;
overflow:hidden;
}
.video-container iframe, .video-container object, .video-container embed {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}Retournez sur votre fiche produit et rechargez la page (ctrl+F5). Si aucun changement n’apparait, videz votre cache (Paramètre avancés/ Performances -> vider le cache) puis rechargez votre page.
Ci-dessous notre exemple imagé pour mettre en place cette 2ème solution.
Conclusion
Vous savez maintenant comment rendre vos vidéo intégrées responsives de deux manières différentes. Comme dit précédemment nous vous conseillons la seconde méthode . En effet vous pouvez voir qu’elle permet une meilleur intégration de la vidéo qu’elle que soit la taille de l’écran. Ce code peut bien sûr être optimisé en fonction de vos besoins.
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 !