Vivez la vie que vous méritez et apportez de la valeur au monde grâce au e-commerce

Rendre vos vidéos Responsives

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

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

Le code

<div style="width: 100%; position: relative; overflow: hidden; padding-top: 56.25%;">
<iframe style="position: absolute; top: 0; left: 0;" src="//www.youtube.com/embed/c7z-bGoanXc" width="100%" height="100%" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
</div>

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:

style="position: absolute; top: 0; left: 0;"

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.

Merci Graphikart pour sa vidéo qui m’a grandement inspirée.

Rendre vos vidéos Responsives
Votez pour cet article

1
Poster un Commentaire

avatar
1 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
tavax Recent comment authors
  Subscribe  
plus récent plus vieux
Recevoir un email pour
tavax
Invité
tavax

Je vais test ça, merci du tips :)