Rendre les iFrames responsives une bonne fois pour toutes.

Parce que y’en a marre to go over and over again ! Ne vous est-il est jamais arrivé de faire 100 fois une chose sans jamais arriver à vous en souvenir par cœur ? Non ? Moi si, en particulier pour rendre les iframes responsives.

Une iframe est un élément externe à un site internet, mais embarquée dans ce dernier. Vous en avez peut-être déjà croisé sans les reconnaîtres. Les exemples les plus communs sont :

  • Les vidéos YouTube
  • Les cartes Google Maps

Maintenant vous voyez de quoi je parle !

Pour rendre une iframe responsive il faut employer la technique suivante :

  • L’envelopper dans un contenant, lequel ayant une position relative, une largeur à 100%, et une hauteur en pixels ou vh (viewport height).
  • L’iframe en elle-même doit avoir une position absolue, ainsi qu’une une largeur et une hauteur à 100%

Prenons un exemple

L’exemple sera la gare de Lille. Non je n’ai pas plus original.

Dans Google Maps, faire dans le panneau à gauche un clic sur l’icône partager. Alors s’ouvre une jolie popup et il nous appartient de faire intégrer une carte. Noter qu’on peut choisir dans le menu déroulant de lui donner une taille personnalisée.

Bref on obtient un joli petit truc comme ça :

<iframe 
    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d20245.53731634663!2d3.017515396445033!3d50.6328351760994!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47c2d58bd35d633b%3A0x2dd8c0c3f5f43032!2sLille-Flandres!5e0!3m2!1sfr!2sfr!4v1587384083448!5m2!1sfr!2sfr" 
    width="600" 
    height="450" 
    frameborder="0" 
    style="border:0;" 
    allowfullscreen="" 
    aria-hidden="false" 
    tabindex="0">
</iframe>

J’ai légérement reformaté pour que ce soit compréhensible.

Bref il faut enlever les attributs width et height et ajouter un attribut style comme ceci :

style="position: absolute;width: 100%;height: 100%;"

Et là ce sera beaucoup mieux. Ne pas oublier d’encapsuler notre iframe dans le contenant dont on a parlé plus haut. Voici le résultat obtenu :

<div style="position:relative;width:100%;height:350px;">
<iframe 
    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d20245.53731634663!2d3.017515396445033!3d50.6328351760994!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47c2d58bd35d633b%3A0x2dd8c0c3f5f43032!2sLille-Flandres!5e0!3m2!1sfr!2sfr!4v1587384083448!5m2!1sfr!2sfr"  
    frameborder="0" 
    style="border:0;" 
    allowfullscreen="" 
    aria-hidden="false" 
    tabindex="0"
    style="position: absolute;width: 100%;height: 100%;"
>
</iframe>
</div>

Voilà cette façon de faire avec les attributs style permet de rendre une iframe responsive dans un post WordPress par exemple. Mais on peut aussi le faire en css pour que ce soit plus « propre » on va dire :

.iframe-container{
    position:relative;
    width:100%;
    height:350px;
}
.iframe-container iframe{
    position: absolute;
    width: 100%;
    height: 100%;
}

Je note ça ici, et si cette technique peut vous être utile alors tant mieux. En tout cas, j’espère ne plus jamais en entendre parler.