Comment créer : Iframe réactif

Apprendre à créer des iframes réactifs avec CSS.

Iframe réactif

Créer un iframe qui conserve le ratio d'aspect lors de l'ajustement de la taille (4:3, 16:9, etc.) :

Qu'est-ce que le ratio d'aspect ?

Le ratio d'aspect d'un élément décrit la relation entre sa largeur et sa hauteur. Deux ratios d'aspect de vidéo courants sont 4:3 (format vidéo commun du XXe siècle) et 16:9 (format HD TV et télévision numérique européenne ainsi que le format vidéo par défaut de YouTube).

Comment - Iframes réactifs

Première étape - Ajouter HTML :

Utilisez un élément de conteneur, par exemple <div>, et ajoutez-y l'iframe :

<div class="container">
  <iframe class="responsive-iframe" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>

Deuxième étape - Ajouter CSS :

pour padding-top Ajouter des pourcentages pour maintenir le ratio d'aspect du div conteneur. L'exemple suivant crée un conteneur avec un ratio d'aspect 16:9, ce qui est le ratio d'aspect par défaut des vidéos YouTube.

Exemple - Ratio d'aspect 16:9

.container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* Ratio d'aspect 16:9 (9 divisé par 16 vaut 0.5625) */
}
/* Ensuite, définir le style de l'iframe pour qu'il s'adapte en pleine hauteur et largeur au div conteneur */
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

Essayer personnellement

Autres ratios d'aspect

Exemple - Ratio d'aspect 4:3

.container {
  padding-top: 75%; /* Ratio d'aspect 4:3 */
}

Essayer personnellement

Exemple - Ratio d'aspect 3:2

.container {
  padding-top: 66.66%; /* Ratio d'aspect 3:2 */
}

Essayer personnellement

Exemple - Ratio d'aspect 8:5

.container {
  padding-top: 62.5%; /* Ratio d'aspect 8:5 */
}

Essayer personnellement

Exemple - 1:1 Ratio d'aspect (hauteur et largeur toujours égales)

.container {
  padding-top: 100%; /* Ratio largeur/hauteur 1:1 */
}

Essayer personnellement