Toutes les clefs pour réussir dans le e-commerce

Mes modules Prestashop

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.

Poster un Commentaire

1 Commentaire sur "Rendre vos vidéos Responsives"

Recevoir un email pour
avatar
Trier par:   plus récent | plus vieux | Plus de vote
tavax
Invité
tavax

Je vais test ça, merci du tips :)

wpDiscuz