Comment faire une IFRAME responsive en CSS
De nos jours, de plus en plus de personnes utilisent leur téléphone pour naviguer sur le Web. Il est donc d’autant plus important que les sites web soient réactifs. La plupart des sites Web utilisent des vidéos YouTube, des cartes Google ou d’autres éléments de sites Web externes. Ces fonctions sont le plus souvent incorporées dans une page web en utilisant l’élément html iframe et sont l’une des choses les plus délicates à rendre responsive.
J’ai lutté pendant longtemps pour que les vidéos YouTube conservent leur ratio sur différentes tailles d’écran. En testant mon site sur un smartphone, je passais des heures à essayer de comprendre pourquoi mes vidéos ne faisaient pas ce que j’attendais … Jusqu’à ce que je découvre finalement un bon truc CSS que je puisse appliquer à tous mes iframes. Je ne peux pas attendre pour partager cette astuce avec vous dans l’article suivant.
Iframes réactifs
À des fins de démonstration, cet article utilisera une intégration YouTube pour notre iframe. Tout d’abord, allez sur YouTube, cliquez sur “Partager” sous la vidéo puis sur “Intégrer”. Vous devriez maintenant avoir le code suivant à copier dans votre code HTML.
Ensuite, nous devons supprimer width = “560” height = “315” car ils sont là pour définir la taille de l’iframe. Puisque nous allons fixer la taille, cela n’est pas nécessaire pour nos objectifs.
Utiliser CSS
Ensuite, nous devons envelopper l’iframe dans un autre élément html comme un
Définissez votre classe wrapper avec le style suivant:
.resp-container { position: relative; overflow: hidden; padding-top: 56.25%; }
- position: relative La position de l’enveloppe et de l’iframe est très importante ici. Nous le plaçons à une position: relative afin que nous puissions positionner notre iframe plus tard par rapport à l’élément d’enveloppe. En effet, dans CSS, position: absolute positionne l’élément en fonction de l’élément parent non statique le plus proche.
- overflow: hidden est là pour cacher tous les éléments qui pourraient être placés à l’extérieur du conteneur.
- padding-top: 56.25% C’est là que la magie est. En CSS, la propriété padding-top peut recevoir un pourcentage, c’est ce qui maintient notre iframe au bon ratio. En utilisant le pourcentage, il calculera le remplissage à utiliser en fonction de la largeur de l’élément. Dans notre exemple, nous voulons conserver le ratio de 56,26% (hauteur 9 ÷ largeur 16) car il s’agit du taux par défaut pour les vidéos YouTube. Cependant, d’autres ratios peuvent également être utilisés.
Définissez votre classe iframe comme suit:
.resp-iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
- position: absolute; Cela donnera à l’iframe une position par rapport à l’élément parent non statique le plus proche.
- top: 0 et left: 0 sont utilisés pour positionner l’iframe au centre du conteneur.
- width: 100% et height: 100% font que l’iframe prenne tout l’espace du wrapper.
Démo
Une fois que vous avez terminé, vous devriez obtenir un iframe réactif. Vous pouvez jouer avec la taille de votre navigateur et voir à quel point vos iframes seraient réactifs!
Utilisation de framework CSS
La plupart des projets utilisent des framework CSS pour aider à garder l’uniformité de style tout au long du projet, que ce soit Bootstrap ou Material-UI. Certains de ces frameworks ont déjà des classes prédéfinies qui feront exactement la même chose que ce qui est dans le hack ci-dessus (malheureusement pas tous). Dans chaque cas, vous devez créer un élément d’enveloppe et lui donner une certaine classe.
Utiliser Bootstrap
Dans Bootstrap 3.2 et plus, utilisez la classe prédéfinie .embed-responsive et un modificateur de classe de format d’aspect comme .embed-responsive-16by9 . Il y en a d’autres énumérés ci-dessous. Similairement à l’astuce ci-dessus, ce modificateur de ratio ajoutera le padding-top avec des pourcentages différents selon la classe de modificateur donnée. Ensuite, donnez à votre iframe la .embed-responsive-item . Voici un exemple:
Les différents rapports d’aspect pouvant être utilisés sont:
.embed-responsive-21by9 .embed-responsive-16by9 .embed-responsive-4by3 .embed-responsive-1by1
Vous pouvez bien sûr créer votre propre classe de modification. Par exemple:
.embed-responsive-10by3 { padding-top: 30%; }
Utilisation de Materialise
Si vous utilisez Materialise CSS, vous n’avez pas non plus besoin de vos propres classes. Ajoutez simplement la classe video-container à votre wrapper:
Utilisation de fondation
Les classes de modificateur de rapport d’aspect sont définies dans la mappe $responsive-embed-ratios de votre fichier de paramètres Foundation:
$responsive-embed-ratios: ( default: 16 by 9, vertical: 9 by 16, panorama: 256 by 81, square: 1 by 1, );
Images réactives
Les images sont beaucoup plus faciles à traiter. Avec seulement un peu de CSS, vous pouvez avoir des images conservent leur format d’origine quelle que soit la taille de l’écran.
En utilisant la largeur
Si vous ne définissez pas la largeur à un montant fixe, mais que vous le fixez à 100% avec une height: auto comme suit:
img { width: 100%; height: auto; }
Vos images seront alors réactives et conserveront leur ratio. Cependant, l’utilisation de la largeur signifie que vos images peuvent être plus grandes que leur taille d’origine et vous pourriez vous retrouver avec une image floue.
Utilisation de la largeur maximale
Si vous ne voulez pas que vos images soient plus grandes que la taille d’origine, utilisez max-width: 100% à la place:
img { max-width: 100%; height: auto; }
Au final, vous obtiendrez des images réactives, comme celle-ci :
En résumé
En conclusion, dans cet article, nous avons vu le hack CSS qui peut rendre vos iframes sensibles. Nous avons également vu plusieurs cadres populaires qui fournissent des classes prédéfinies qui le feront pour vous. Comme vous l’avez vu, c’est en fait assez facile et j’espère que je vous ai épargné des heures d’essayer d’adapter vos iframes sur votre mobile. Enfin, vous avez vu à quel point il est facile d’adapter vos images à votre site Web réactif.
Faites-moi savoir ci-dessous dans les commentaires ce que vous pensez de l’article et si vous avez des questions sur tout ce qui précède.
