Un iframe en 16/9

LMDBT - Le blog

Obtenir un iframe "responsive" au format 16/9 (ou autre…)

Quel est le problème ?

Bien souvent, lorsqu’on poste un iframe dans une page HTML, sa longueur et sa largeur sont définies en nombre de pixels, ce qui ne permet pas de s’adapter à la taille de l’écran matériel qui le consulte (téléphone ou tablette). Comme par exemple ici :

Dans ce billet, je propose un code qui offre un iframe qui s’adapte à la taille de l’écran. Par exemple :

Agrandissez et réduisez la fenêtre de votre navigateur pour comprendre l’intérêt de ce code. 😉

Un iframe dans une div

Le code de la div

Voici le code de la div dans laquelle il faut insérer l’iframe :

<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;"> </div>

Les \(56.25~\%\) vient du rapport 16/9, en effet : \(\displaystyle\frac{9}{16}=56{,}25~\%\).
Ainsi, pour un rapport 4/3, il faudra changer cette valeur par \(75~\%\).
Par exemple, le code ci-dessous :

<div style="position: relative; padding-bottom: 75%; height: 0; overflow: hidden;"> 
    <iframe title="C'est pas sorcier - Voyage dans le cyber-espace" src="https://www.youtube.com/embed/YCY6gD0kChM" allowfullscreen="" sandbox="allow-same-origin allow-scripts allow-popups" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" frameborder="0"></iframe>
</div>

Donne ce résultat :

Le code de l’iframe

Voici le code de l’iframe qu’il faut insérer dans la balise div présentée précédemment :

<iframe title="Les prismes droits : définition, propriétés et volume - Niveau 5e/4e" src="https://tube-sciences-technologies.apps.education.fr/videos/embed/5edd4a0f-4846-4eaa-9d02-cf3c8f763952" allowfullscreen="" sandbox="allow-same-origin allow-scripts allow-popups" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" frameborder="0"></iframe>

Dans ce code, vous pouvez changer :

• le titre : title
• l’URL : src

Les autres paramètres peuvent être modifiés au risque de modifier l’aperçu.

Modifier la taille ?

Le plus simple pour modifier la taille de l’iframe en gardant la proportion est d’insérer le code entier présenté au sein d’une div de la taille désirée.
Le code ci-dessous réduit la taille de la vidéo à \(50~\%\) de la largeur du body.

<div style="width:50%;">
  <div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;"> 
      <iframe title="Les prismes droits : définition, propriétés et volume - Niveau 5e/4e" src="https://tube-sciences-technologies.apps.education.fr/videos/embed/5edd4a0f-4846-4eaa-9d02-cf3c8f763952" allowfullscreen="" sandbox="allow-same-origin allow-scripts allow-popups" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" frameborder="0"></iframe>
  </div>
</div>

Voici le résultat :