Qu'est-ce qu'une iframe ?

Une <iframe> (inline frame) est un élément HTML qui intègre une autre page web ou un document dans la page actuelle. Elle crée un contexte de navigation distinct dans une région rectangulaire de la page, permettant l'affichage de contenu provenant d'une URL différente — comme une carte, une vidéo ou un widget tiers — sans que l'utilisateur ne quitte la page.

Les iframes sont couramment utilisées pour intégrer des vidéos YouTube, Google Maps, des formulaires de paiement, des widgets de réseaux sociaux et des bannières publicitaires. Comme le contenu intégré s'exécute dans son propre contexte, des attributs comme sandbox et allow permettent aux développeurs de contrôler étroitement ce que la page intégrée est autorisée à faire.

Description de l'outil

Cet outil génère du code HTML <iframe> prêt à coller à partir d'un formulaire simple. Configurez l'URL source, les dimensions, le comportement du défilement, la stratégie de chargement, les permissions et les restrictions sandbox, et l'outil génère instantanément la balise correspondante. Aucune écriture manuelle d'attributs ni mémorisation de la syntaxe des drapeaux sandbox n'est nécessaire.

Exemples

Iframe minimal :

<iframe
  src="https://example.com"
  width="600"
  height="400"
  allowfullscreen
  style="border: none;"
></iframe>

Iframe chargée en différé avec sandbox :

<iframe
  src="https://example.com"
  width="800"
  height="500"
  loading="lazy"
  allowfullscreen
  style="border: none;"
  sandbox="allow-scripts allow-same-origin"
></iframe>

Iframe avec permissions de caméra et microphone :

<iframe
  src="https://meet.example.com"
  width="960"
  height="540"
  allowfullscreen
  style="border: none;"
  allow="camera; microphone; display-capture"
></iframe>

Fonctionnalités

  • Génère du code <iframe> valide à partir d'un formulaire visuel — aucune connaissance HTML requise
  • Contrôle complet sur les permissions (allow) et les restrictions sandbox
  • Les mises à jour d'aperçu en direct se font au fur et à mesure que vous modifiez une option

Options expliquées

Option Description
URL L'attribut src — l'adresse de la page à intégrer
Largeur / Hauteur Dimensions en pixels de l'iframe
Titre Étiquette accessible (title attribute) pour les lecteurs d'écran
Nom L'attribut name, utilisé comme cible de lien
Défilement Contrôle la barre de défilement : auto, toujours activée ou toujours désactivée
Chargement eager charge immédiatement ; lazy diffère jusqu'à proximité de la fenêtre d'affichage
Autoriser le plein écran Ajoute allowfullscreen pour que le contenu intégré puisse passer en plein écran
Bordure Lorsqu'elle est décochée, ajoute style="border: none;" pour supprimer la bordure par défaut
Autoriser les fonctionnalités Accorde des permissions d'API de navigateur spécifiques à la page intégrée
Drapeaux sandbox Restreint ce que la page intégrée peut faire ; chaque drapeau réactive une capacité spécifique

Conseils

  • Fournissez toujours un attribut title pour l'accessibilité — les lecteurs d'écran l'annoncent lors de la mise au point de l'iframe.
  • Utilisez loading="lazy" pour les iframes en bas de page afin d'améliorer les performances de chargement de la page.
  • L'ajout de l'attribut sandbox sans drapeaux verrouille complètement le contenu ; ajoutez uniquement les drapeaux dont vous avez réellement besoin.