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 de débuter votre lecture, si vous souhaitez augmenter vos ventes et attirer plus de client sur votre boutique en ligne, téléchargez mon guide gratuit.

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

Le code

[html]
<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>
[/html]

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:
[html]
style= »position: absolute; top: 0; left: 0; »
[/html]

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.

Subscribe
Recevoir un email pour
guest
1 Commentaire
Inline Feedbacks
View all comments
tavax
tavax

Je vais test ça, merci du tips :)