Comment rendre un iframe 100% responsive ?

✍️ Christine Siembida | 📅 Dernière mise à jour le 5 juillet 2025

Savez-vous qu'un iframe n'est pas responsive par défaut ?

Pour rappel, un iframe HTML permet d'intégrer du contenu externe dans votre page web comme des vidéos, des cartes Google Maps sans avoir besoin d'API… En bref, un iFrame c'est comme une fenêtre qui affiche le contenu d'un autre site.

Un iframe, c'est super pratique pour intégrer des contenus externes qui ne supportent pas oEmbed. En effet, il suffit de copier le code d'intégration HTML fourni par la plateforme tierce et de le coller dans votre site. Et hop, le contenu s'affiche.

Mais, l'inconvénient majeur de l'iframe est qu'il ne s'adapte pas parfaitement aux différentes tailles d'écran et aux différents appareils. En résumé, il déroge aux principes du responsive design.

Pourquoi ?

Eh bien, tout simplement parce qu'un iframe a une largeur et une hauteur fixes définies en pixels. Ce sont ces dimensions statiques qui font que les contenus des iframes sont rognés sur les smartphones ou les tablettes et pas en pleine largeur sur les ordinateurs.

Avouez que c'est un peu ballot de faire en sorte que votre site soit responsive et qu'il ne le soit plus que partiellement à cause d'un iframe.

Heureusement, il n'y a pas besoin d'être développeur pour pouvoir remédier à cela ! En effet, il suffit d'ajouter quelques lignes de CSS et de HTML et le tour est joué.

Dans cet article, vous découvrirez donc comment rendre un iframe responsive avec des exemples concrets pour une vidéo YouTube et une carte Google Maps.

Comment rendre un iframe responsive ?

Pour qu'un iframe s'affiche correctement sur toutes les tailles d'écran, il faut vous assurer que son contenu garde le même format d’image (aspect ratio en anglais) une fois redimensionné. C'est-à dire qu'il conserve le même rapport hauteur/largeur que celui mentionné dans le code d'intégration.

En d'autres termes, il faut faire en sorte que l'iframe adapte sa hauteur proportionnellement à sa largeur comme le fait une image dans une conception réactive.

Alors comment rendre un iframe responsive ?

En fait, il existe plusieurs techniques pour assurer la réactivité d'un iframe. Ici, vous allez découvrir la méthode des ratios intrinsèques. L'avantage de cette méthode est qu'elle ne nécessite que du HTML et des règles CSS simples.

En bref, vous allez créer un conteneur parent pour définir le rapport hauteur/largeur. Puis, vous allez ajouter des règles CSS pour que l'iframe s'ajuste automatiquement selon les diverses tailles d'écran.

Voyons en détail comment rendre un iframe responsive grâce à la méthode des ratios intrinsèques.

Les étapes pour rendre un iframe 100% responsive avec la méthode des ratios intrinsèques

Etape 1 : intégration du code iframe dans un conteneur div en HTML

Premièrement, mettez l'iframe à l'intérieur d'un conteneur (div) auquel vous donnez un nom de classe unique. Cette classe CSS vous permettra de personnaliser le conteneur et aussi l'iframe. (Pour l'exemple, j'ai choisi le nom de classe "iframe-container".)

Pour ce faire, modifiez votre code d'intégration HTML comme ceci :

<div class="iframe-container"><iframe le-code-d-integration></iframe></div>

Etape 2 : ajout de CSS pour la fonctionnalité réactive de l'iframe

Deuxièmement, vous allez ajouter du CSS afin que l'iframe se redimensionne proportionnellement en fonction de la largeur du conteneur dans lequel il est intégré.

Cela étant dit, allez dans Apparence > Personnaliser > CSS additionnel.

Tout d'abord, stylisez l'iframe, ici "iframe-container iframe".

• Positionnez l'iframe de manière absolue afin qu'il devienne l'enfant du conteneur : position: absolute
• Placez l'iframe au centre du conteneur à l'aide de top: 0 et left: 0
• Forcez l'iframe à remplir toute la hauteur et la largeur du conteneur avec width: 100% et height: 100%

/* iframe responsive : code pour l'iframe enfant */
.iframe-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Ensuite, stylisez le conteneur avec la classe que vous avez choisie, ici "iframe-container".

• Appliquez un positionnement relatif au conteneur pour qu'il joue le rôle d'élément parent et que l'iframe, son enfant, le remplisse : position: relative
• Bloquez la hauteur du conteneur à zéro afin d'éviter qu'il n'occupe son propre espace : height: 0
• Faites en sorte qu'aucune barre de défilement ne soit affichée : overflow: hidden
• Créez l'espace nécessaire à la conservation du rapport hauteur/largeur originel de l'iframe grâce à la propriété magique : padding-bottom et sa valeur en pourcentage

/* iframe responsive : code pour le conteneur parent */
.iframe-container {
position: relative;
padding-bottom: x%;/*aspect ratio x */
height: 0;
overflow: hidden;
}

Comme vous avez pu le constater, pour la valeur du padding-bottom, j'ai indiqué x %. C'est normal, car cette valeur définit le pourcentage de la largeur du conteneur à utiliser comme hauteur pour l'iframe pour conserver le rapport hauteur/largeur souhaité.. Elle doit donc être calculée en fonction du format d'origine (ratio) du contenu de l'iframe.

Voyons à présent comment trouver la valeur du pourcentage pour le padding-bottom.

Calcul du pourcentage à indiquer pour le padding-bottom

Pour calculer la valeur du pourcentage à indiquer pour le padding-bottom (rembourrage inférieur), il suffit de connaitre le ratio du contenu de l'iframe. Par exemple, pour un ratio de 16:9, il faut diviser 9 par 16, puis multiplier le résultat par 100 : (9/16)100=56.25.

💡 Pour connaitre le ratio utilisé par le contenu de l'iframe, vous pouvez utiliser un outil en ligne comme Aspect Ratio Calculator.

Si vous ne connaissez pas le ratio, vous pouvez également obtenir la valeur avec la hauteur et la largeur indiquées dans l'iframe avec cette formule : (hauteur/largeur)100.

💡 Après, si ça vous ennuie de dégainer votre calculette, voici un outil en ligne qui vous donne le pourcentage de padding-bottom à appliquer : Ratio Padding Calculator. Il suffit juste de donner la largeur et la hauteur du contenu de votre iframe. 😉

Enfin, au cas où cela pourrait vous être utile, voici quelques exemples de pourcentages de padding-bottom pour d'autres formats (ratios) :

Alternative de code pour la réactivité de l'iframe : configuration du style directement dans le HTML

Vous avez vu comment rendre un iframe responsive en ajoutant du CSS et du HTML. Néanmoins, une autre solution existe pour inclure le code. Elle consiste à modifier le code HTML de l'iframe en y ajoutant directement le style. Ainsi, vous n'avez pas besoin de mettre du code dans le CSS additionnel.

Voilà ce que ça donne en reprenant les données de l'exemple ci-dessus :

<style>.iframe-container{position:relative;padding-bottom:x%;height:0;overflow:hidden;}.iframe-container iframe{position:absolute;top:0;left:0;width:100%;height:100%;}</style>
<div class="iframe-container">
<iframe le-code-d-integration></iframe>
</div>

Passons maintenant à des exemples concrets :

Comment rendre l'iframe d'une carte Google Maps et d'une vidéo YouTube responsive ?

Intégrer une carte Google Maps responsive via iframe

Intégrer une carte Google Maps via iframe, c'est pratique, car il n'y a pas besoin de clé API. Mais, faire en sorte que la carte Google Maps soit responsive, c'est mieux !

Calcul du padding-bottom à appliquer pour obtenir une carte Google Maps réactive

Actuellement, la taille moyenne par défaut dans le code d'intégration des cartes Google Maps est de 600 px de large et de 450 px de hauteur. L'aspect ratio à respecter pour rendre l'iframe de Google Maps responsive est donc de 4:3.

Calculez à présent, le pourcentage de padding-bottom à appliquer pour conserver l'aspect ratio de 4:3 pour toutes les tailles d'écran .

Puisque vous connaissez le ratio, vous pouvez utiliser la méthode manuelle : (3/4)100=75.

Ou bien, servez-vous de Ratio Padding Calculator pour obtenir directement la valeur du ratio-padding à partir des dimensions de la carte Google Maps.

Le padding-bottom à appliquer pour conserver l'aspect ratio de 4:3 est 75%.

Rendre l'iframe de la carte Google Maps responsive avec du HTML et du CSS

En premier lieu, pour rendre la carte Google Maps responsive, mettez l'iframe de Google Maps dans un conteneur en indiquant une classe CSS. Pour l'exemple, ce sera maps-responsive.

Pour ce faire, modifiez le code HTML du code d'intégration en ajoutant <div class="maps-responsive"> avant le code de l'iframe et </div> après.

Ce qui nous donne :

<div class="maps-responsive"><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2624.365295903427!2d2.3141035759623714!3d48.87031239986812!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e66fce8ca6e347%3A0x2e38f4467a582f22!2sLe%20Palais%20de%20L&#39;%C3%89lys%C3%A9e!5e0!3m2!1sfr!2sus!4v1749382336054!5m2!1sfr!2sus" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe></div>

Ensuite, allez dans Apparence > Personnaliser > CSS additionnel.

Là, ajoutez le CSS pour appliquer le padding-bottom de 75% au conteneur parent (classe CSS maps-responsive). Puis, stylisez l'iframe situé à l'intérieur afin qu'il remplisse complètement le conteneur parent.

/*Responsive Google Maps*/
.maps-responsive {
position: relative;
padding-bottom: 75%;/* aspect ratio 4:3 */
height: 0;
overflow: hidden;
}

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

Alternative : préserver le rapport hauteur/largeur de l'iframe Google Maps en HTML uniquement

Voici le code HTML de l'iframe Google Maps avec intégration directe du style afin qu'il devienne réactif :

<style>.maps-responsive{position:relative;padding-bottom:75%;height:0;overflow:hidden;}.maps-responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%;}</style>
<div class="maps-responsive">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2624.365295903427!2d2.3141035759623714!3d48.87031239986812!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e66fce8ca6e347%3A0x2e38f4467a582f22!2sLe%20Palais%20de%20L&#39;%C3%89lys%C3%A9e!5e0!3m2!1sfr!2sus!4v1749382336054!5m2!1sfr!2sus" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>

Rendre l'iframe d'une vidéo YouTube responsive

A présent, voyons comment faire pour redimensionner une vidéo de YouTube selon les appareils utilisés tout en conservant le ratio d'origine.

Calcul du padding-bottom à appliquer pour obtenir une vidéo YouTube réactive

Pour les vidéos de YouTube, le code d'intégration indique une largeur de 560 px et une hauteur de 315 px. Le ratio d'une vidéo de YouTube est donc de 16:9.

Maintenant, calculons le pourcentage de padding-bottom à appliquer pour conserver l'aspect ratio de 16:9 sur tous les écrans.

Calcul manuel selon le ratio : (9/16)100=56.25 ou avec Ratio Padding Calculator selon les dimensions :

Le pourcentage de padding-bottom à appliquer pour conserver le format 16:9 de la vidéo sur tous les écrans est de 56.25%.

Après, pour rendre responsive la vidéo de YouTube contenue dans l'iframe, le procédé est le même que pour tout autre contenu d'iframe.

Rendre l'iframe de la carte Google Maps responsive avec du HTML et du CSS

Tout d'abord, enfermez l'iframe de la vidéo YouTube dans un conteneur qui aura pour l'exemple la classe CSS "responsive-video" :

<div class="responsive-video">
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/hhtq9dSP2kY?si=oaZ3Z5Nuq4b7C8f_" title="Présentation du plugin WPMasterToolKit" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>

Puis, allez dans Apparence > Personnaliser > CSS additionnel.

Définissez l'iframe en position absolue et le conteneur en position relative. Ensuite, faites en sorte que la vidéo YouTube remplisse toute la largeur et la hauteur du conteneur responsive-video. Enfin, ajoutez un padding-bottom de 56.25% pour conserver le rapport hauteur/largeur de 16:9.

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

.responsive-video {
  position: relative;
  padding-bottom:56.25%;/* aspect ratio 16:9 */
  height: 0;
  overflow: hidden;
}

Alternative : préserver l'aspect-ratio de l'iframe d'une vidéo YouTube en HTML uniquement

Si vous préférez modifier directement le code HTML d'intégration pour rendre la vidéo de YouTube réactive, voici le code modifié :

<style>.responsive-video{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;}.responsive-video iframe{position:absolute;top:0;left:0;width:100%;height:100%;}</style>
<div class="responsive-video">
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/hhtq9dSP2kY?si=oaZ3Z5Nuq4b7C8f_" title="Présentation du plugin WPMasterToolKit" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>

Iframe : responsive, performance, accessibilité, sécurité

Pour conclure, rappelez-vous que la méthode des ratios intrinsèques ne se limite pas à l'intégration responsive d'une carte Google Maps ou d'une vidéo YouTube. Alors, utilisez-la pour rendre responsive tous les autres contenus basés sur iframe. Cela vous permettra d'améliorer considérablement l'expérience utilisateur sur votre site.

Après, n'oubliez pas que les iframes plombent la performance des sites. Pour améliorer le temps de chargement de votre page, si votre iframe ne se situe pas dans la fenêtre d'accueil, différez son chargement. Pour ce faire, vérifiez si l'attribut loading="lazy" est présent dans le code d'intégration fourni. S'il n'y est pas, ajoutez-le. Ou bien, activez le lazy load des iframes dans votre plugin d'optimisation. (ex : LiteSpeed Cache).

Et puis, pour garantir l'accessibilité de l'iframe, ajoutez-lui un titre unique et descriptif.

Enfin, pour la sécurité de votre site, utilisez uniquement des codes iframes provenant de sites de confiance. En effet, un script malveillant peut s'y cacher et être utilisé pour compromettre votre site.