Rendre vos vidéos Responsives

Voici un tutoriel qui va vous expliquer comment rendre vos vidéos responsives en n’utilisant que du CSS.

Avant d’aller plus loin pensez à vous inscrire à la BlackBox et développer vos ventes.

L’astuce est d’insérer un DIV comme conteneur qui se chargera d’effectuer le redimensionnement.

Le code

Style du conteneur:

Width: 100%; afin d’avoir un div qui prendra toute la largeur (de l’élément dans lequel il se trouve).
position: relative; permet de fixer l’iframe à l’intérieur de ce div.
overflow: hidden; pour masquer les débordements.
padding-top: 56.25% La valeur indiquée ici correspond au ratio entre la largeur et la hauteur. Pour une vidéo qui initialement fait 560px de large et 315px de haut, le calcul est le suivant: 315/560*100=56.25.

Style de l’iframe:

On commence par remplacer les valeurs initiales de la largeur et la hauteur par 100%.
Puis on ajoute les styles qui permettent de positionner l’iframe dans son conteneur:

Voila désormais votre vidéo se redimensionne sans se déformer.

Module ajax popup

Pour ceux qui utilise le plugin ajax popup pour Prestashop voici une vidéo expliquant comment intégrer des vidéos responsives avec ce module.

Téléchargez le module ajax popup en cliquant ici

Olivier CLEMENCE

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 ! !