<iframe>

Description

L’élément <iframe> (inline frame) intègre un document HTML séparé dans la page. Chaque <iframe> crée un contexte de navigation imbriqué indépendant. L’attribut sandbox est fortement recommandé pour les contenus tiers car il limite les capacités du document intégré.

Syntaxe

<iframe src="https://example.com" width="600" height="400" title="Description du contenu">
</iframe>

Exemples

Vidéo YouTube embarquée :

<iframe
  src="https://www.youtube-nocookie.com/embed/VIDEO_ID"
  width="560"
  height="315"
  title="Titre de la vidéo YouTube"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
  loading="lazy"
  referrerpolicy="strict-origin-when-cross-origin"
></iframe>

Carte intégrée avec sandbox :

<iframe
  src="https://maps.example.com/embed?q=Paris"
  width="100%"
  height="400"
  title="Carte de localisation Paris"
  sandbox="allow-scripts allow-same-origin"
  loading="lazy"
></iframe>

Attributs spécifiques

Attribut	Type	Description
src	URL	URL du document à intégrer.
width	integer	Largeur en pixels.
height	integer	Hauteur en pixels.
name	string	Nom du cadre (cible pour <a target> ou <form target>).
sandbox	string	Restreint les capacités : allow-scripts, allow-forms, allow-same-origin, allow-popups…
allow	string	Politique de permissions : camera, microphone, fullscreen, payment…
allowfullscreen	boolean	Autorise le plein écran (legacy, préférer allow="fullscreen").
loading	enum	lazy (chargement différé) ou eager (immédiat).
referrerpolicy	string	Politique d’envoi du Referer.
srcdoc	string	Contenu HTML inline à afficher (prioritaire sur src).

Notes

title obligatoire pour l’accessibilité : toujours fournir un title descriptif sur <iframe>. Les lecteurs d’écran l’annoncent quand l’utilisateur entre dans le cadre.

sandbox pour la sécurité : sans sandbox, le contenu d’une <iframe> a accès à JavaScript, formulaires, fenêtres pop-up, etc. Toujours sandboxer les contenus tiers et n’accorder que les permissions nécessaires.

Performances : loading="lazy" est recommandé pour les <iframe> en bas de page (cartes, vidéos YouTube) — elles ne chargent qu’à l’approche du viewport.