Comment CSS permet à iframe d'obtenir des effets de hauteur adaptatifs

De plus en plus de personnes utilisent des téléphones mobiles pour naviguer sur le Web, la réactivité des sites Web est donc de plus en plus importante. Lors du test du site sur mobile, il m'a fallu beaucoup d'efforts pour comprendre pourquoi mes vidéos ne fonctionnaient pas comme prévu, jusqu'à ce que je découvre une excellente astuce CSS qui permettait à l'iframe d'avoir une hauteur adaptative. Ensuite, je partagerai avec vous la méthode permettant de réaliser dynamiquement une hauteur personnalisée d'iframe. Les amis intéressés peuvent s'y référer.

hauteur adaptative iframe

À des fins de démonstration, cet article utilisera une vidéo pour intégrer notre iframe. Tout d'abord, visitez l'URL de la vidéo, cliquez sur "Partager" sous la vidéo, puis cliquez sur "Intégrer". Le code spécifique est le suivant :

<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>

Ensuite, nous devons supprimer width = "560" height. = "315", Parce que c'est ici que nous définissons la taille de l'iframe. Puisque nous devons définir les dimensions nous-mêmes, nous n'avons pas besoin de le faire.

Après avoir utilisé CSS

nous devons placer l'iframe à l'intérieur d'un

. Ajoutez ensuite des classes CSS à l'élément encapsulé et une classe à l'iframe comme indiqué ci-dessous.

<div class="resp-container">
    <iframe class="resp-iframe" src="https://www.youtube.com/embed/dQw4w9WgXcQ" gesture="media"  allow="encrypted-media" allowfullscreen></iframe>
</div>

Définissez la classe wrapper en utilisant le style suivant :

.resp-container {
    position: relative;
    overflow: hidden;
    padding-top: 56.25%;
}

position : relative et la position de l'iframe est très importante ici. position : relative afin que nous puissions ultérieurement associer l'iframe à l'élément d'emballage. En effet, en CSS, position: Absolute positionne un élément en fonction de l'élément parent non statique le plus proche.

overflow: Hidden Indique s'il faut masquer les éléments pouvant être placés à l'extérieur du conteneur.

rembourrage-haut : 56,25 % C'est la clé. En CSS, la propriété padding-top peut être définie sur un pourcentage, ce qui maintient notre iframe dans les bonnes proportions. En utilisant des pourcentages, il calculera le remplissage à utiliser en fonction de la largeur de l'élément. Dans notre exemple nous souhaitons conserver un ratio de 56,26%, d'autres ratios peuvent également être utilisés.

Définissez la classe iframe comme suit :

.resp-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

position: absolue; Cela donnera à l'iframe une position par rapport au wrapper et la placera sur le rembourrage du wrapper.

haut : 0 et gauche : 0 permettent de positionner l'iframe au centre du conteneur.

largeur : 100 % et hauteur : 100 % font que l'IFRAME occupe tout l'espace enveloppé.

Une fois terminé, vous devriez obtenir une iframe réactive.

Résumé : Dans cet article, nous avons vu les techniques qui permettent aux iframes d'atteindre une hauteur adaptative. Comme vous pouvez le constater, c'est en fait assez simple et j'espère que cet article vous évitera des heures d'essais.

【Tutoriels associés recommandés】

1. Tutoriel CSS

2. Qu'est-ce que