Mode d'emploi - Iframe réactif
Apprenez à créer des iframes réactifs avec CSS.
Iframes réactifs
Créez une iframe qui conservera le format d'image (4:3, 16:9, etc.) lors du redimensionnement :
Qu'est-ce que le format d'image ?
Le rapport d'aspect d'un élément décrit la relation proportionnelle entre sa largeur et sa hauteur. Deux formats d'image vidéo courants sont 4: 3 (le format vidéo universel du 20e siècle) et 16: 9 (universel pour la télévision HD et la télévision numérique européenne, et pour les vidéos YouTube).
Comment - Iframes réactifs
Étape 1) Ajoutez du HTML :
Utilisez un élément conteneur, comme <div>, et ajoutez l'iframe à l'intérieur :
Exemple
<div class="container">
<iframe
class="responsive-iframe"
src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
Étape 2) Ajoutez CSS :
Ajoutez une valeur en pourcentage pour padding-top
maintenir le rapport d'aspect du conteneur DIV. L'exemple suivant créera un format d'image de 16:9, qui est le format d'image par défaut des vidéos YouTube.
Exemple Format d'image 16:9
.container {
position: relative;
overflow: hidden;
width: 100%;
padding-top: 56.25%; /* 16:9 Aspect
Ratio (divide 9 by 16 = 0.5625) */
}
/* Then style the iframe to fit in the container
div with full height and width */
.responsive-iframe {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
}
Autres formats d'image :
Exemple 4:3 Format d'image
.container {
padding-top: 75%; /*
4:3 Aspect
Ratio */
}
Exemple 3:2 Format d'image
.container {
padding-top: 66.66%; /*
3:2 Aspect
Ratio */
}
Exemple Format d'image 8:5
.container {
padding-top: 62.5%; /*
8:5 Aspect
Ratio */
}
Exemple de rapport hauteur/largeur 1:1 (la hauteur et la largeur sont toujours égales)
.container {
padding-top: 100%; /*
1:1 Aspect
Ratio */
}