Share
Les ratios intrinsèques sont une approche pour développer et contracter des éléments sur une page Web, leur permettant d’être fluides tout en limitant leurs proportions. Thierry Koblentz a proposé l'idée pour la première fois en 2009.
Ils sont fréquemment utilisés avec la vidéo car ni la largeur ni la hauteur d'un iframe (l'élément généralement utilisé lors de l'incorporation de contenu vidéo) ne sont pas automatiquement adaptées aux sites Web fluides..
Longue histoire courte: la vidéo n'est pas sensible par défaut.
D'énormes écrits ont été rédigés sur le sujet. L’article le plus connu est A List Apart de Thierry Koblentz, qui suggère de faire beaucoup de choses avec position: relative et quelques piratages pour l'ancien Internet Explorer, et une fois que vous avez terminé de le mettre en œuvre, vous avez ajouté des dizaines de lignes de code à votre balisage et à votre code CSS uniquement pour rendre une vidéo sensible. Argh!
Heureusement, nous avons maintenant accès à l'unité de dimensionnement vw et tant que vous n'avez pas à supporter les anciens appareils Android ou IE8, son utilisation est relativement sûre..
Tout ce que nous avons à faire est de définir la largeur de notre iframe sur 100%, puis de définir sa hauteur selon la formule suivante: (100 * ratio) vw.
Dans le cas de la plupart des vidéos YouTube, votre rapport sera de 16: 9 (autrement dit, 9/16). Pour rendre une vidéo YouTube réactive, utilisez le code CSS suivant:
iframe width: 100%; hauteur: 56.25vw; / * 100 * (9/16) * /
Cela est encore plus facile lorsque vous utilisez un préprocesseur tel que Sass, LESS ou Stylus, car vous pouvez transmettre les rapports que vous souhaitez à la volée. Par exemple, pour une vidéo 4: 3, vous pouvez écrire:
iframe largeur: 100% hauteur: (100 * (3/4)) vw
Que se passe-t-il si on veut y ajouter une marge ou une bordure? Il semble que tout soit bouleversé. Pour résoudre ce problème, nous devons simplement ajouter notre bordure et nos marges à un élément d'habillage, puis soustraire la bordure de notre hauteur à l'aide de calc. Nous ajoutons bloc de visualisation à notre iframe pour l'empêcher de créer un espace vide au bas de la vidéo.
.marge de vid: bord 2rem: 30px iframe rouge solide Largeur: 100% hauteur: calc ((100vw - 60px) * (9/16)) affichage: bloc
Si nous voulons que notre vidéo soit insérée dans un conteneur qui ne couvre que 70% de la fenêtre de visualisation, le prochain «Gotcha» se présente. Simple, il suffit de changer le 100vw dans notre fonction calc à 70vw.
C'est tout ce qu'on peut en dire! Vidéos réactifs super faciles. Pour plus de détails sur les ratios et les unités vw, consultez le génial CodePen de Jason Talbert.
Accentsconagua