Générateur d'Iframe
Générez des codes iframe HTML facilement. Personnalisez dimensions, défilement, bordures et options responsives. Copiez instantanément.
Un générateur d'iframe écrit la balise HTML qui intègre une page web dans une autre. Saisissez l'adresse dans URL, réglez Largeur et Taille avec le sélecteur px ou % placé à côté de chaque champ, et le panneau Code HTML se réécrit à chaque frappe. Avec les réglages par défaut — 100 % de large, 600 px de haut, barre de défilement affichée, sans bordure, plein écran et chargement différé activés — il produit <iframe src="https://example.com" width="100%" height="600px" style="border: none;" allowfullscreen loading="lazy"></iframe>
Outils populaires
À propos de Générateur d'Iframe
Cette page construit un seul élément HTML : une balise <iframe>, sans div englobante, sans feuille de style et sans script. Vous fournissez une URL et deux nombres, et chaque case cochée se répercute immédiatement dans le panneau Code HTML. Le panneau Aperçu, à côté, affiche la même adresse à la même taille et avec la même bordure : vous voyez donc l'intégration avant de coller la balise où que ce soit.
Chaque commande correspond à une partie de la balise. Largeur et Taille ont chacune leur sélecteur px ou %, et les boutons rapides sous l'outil règlent 300x200, 560x315, 800x600 ou la pleine largeur en un clic. Afficher la barre de défilement, une fois décochée, ajoute scrolling="no". Bordure, une fois cochée, ouvre Type de bordure (solide, tirets, pointillés, double), Épaisseur de bordure sur un curseur de 1 à 10 px et Couleur de bordure sous forme de pastille et de champ hexadécimal, puis les écrit dans un attribut style comme style="border: 4px solid #FF6600;". Autoriser plein écran ajoute l'attribut allowfullscreen, Chargement différé ajoute loading="lazy".
Ce que l'outil laisse volontairement de côté compte tout autant. La balise ne porte ni attribut title, ni sandbox, ni allow, ni referrerpolicy : ajoutez donc un title vous-même avant la mise en ligne, car un cadre sans title est annoncé comme une zone sans nom par les lecteurs d'écran. Notez aussi que scrolling figure dans la liste des attributs obsolètes et non conformes du standard HTML du WHATWG : un validateur le signalera même si les navigateurs le respectent encore.
Le générateur ne peut pas rendre un site intégrable. Si la cible répond avec X-Frame-Options: DENY ou SAMEORIGIN, ou avec une directive Content-Security-Policy frame-ancestors qui exclut votre domaine, le navigateur refuse d'afficher le cadre quoi que dise la balise, et le panneau Aperçu reste vide. Rien de ce que vous saisissez n'est envoyé ailleurs : la balise est assemblée dans votre navigateur, et la seule requête émise est celle que votre propre navigateur fait pour dessiner l'aperçu.
Cas d'utilisation
Comment utiliser
Saisissez ou collez l'adresse de la page à intégrer dans le champ URL ; le panneau Code HTML reste vide tant qu'il n'y en a pas.
Réglez Largeur et Taille en choisissant px ou % dans le sélecteur voisin de chaque nombre, ou appuyez sur l'un des boutons 300x200, 560x315, 800x600 et 100 % sous l'outil.
Cochez ou décochez Afficher la barre de défilement, Autoriser plein écran et Chargement différé : chaque clic ajoute ou retire un attribut dans le code.
Activez Bordure pour faire apparaître Type de bordure, Épaisseur de bordure et Couleur de bordure, et voyez l'attribut style s'ajouter à la balise.
Contrôlez le panneau Aperçu : il affiche la même URL à la même taille et avec la même bordure, donc un cadre vide signifie que ce site refuse d'être intégré.
Appuyez sur le bouton de copie en haut à droite du panneau Code HTML, collez la balise dans votre page et ajoutez un attribut title pour les lecteurs d'écran.
Astuces Pro
- Laissez Largeur en % et Taille en px. C'est ce couple, le 100 % sur 600 px par défaut, qui fait rétrécir l'intégration avec la colonne qui la contient ; passer Largeur en px fige le cadre, qui débordera alors sur un téléphone.
- Ajoutez title="..." à la balise après l'avoir copiée. Le générateur n'écrit aucun attribut title, et un iframe sans title est annoncé comme un cadre sans nom, le reproche d'accessibilité le plus fréquent sur les intégrations.
- Ne décochez Afficher la barre de défilement qu'en cas de nécessité : cela écrit scrolling="no", un attribut que le standard HTML classe parmi les obsolètes. Maîtriser le débordement en CSS dans la page intégrée est la manière conforme de faire.
- La commande Couleur de bordure associe une pastille et un champ hexadécimal. Tapez #FF6600 dans le champ texte : la bordure de l'Aperçu et l'attribut style du panneau Code HTML changent ensemble, ce qui permet de coller exactement à une couleur de marque.
- Si l'Aperçu reste vide alors que le code semble parfait, cessez de modifier la balise : le site cible refuse d'être encadré, et aucun attribut de ce générateur ne peut passer outre son en-tête X-Frame-Options ou Content-Security-Policy.
Dépannage
Le panneau Aperçu reste vide alors que l'URL est bonne et que le code semble correct.
Le site que vous encadrez le refuse, via un en-tête X-Frame-Options: DENY ou SAMEORIGIN ou une directive Content-Security-Policy frame-ancestors. Utilisez l'URL d'intégration que le service publie à cet effet, ou faites un lien vers la page plutôt que de l'encadrer.
Le panneau Code HTML n'affiche rien et l'Aperçu indique « Entrez l'URL pour aperçu ».
Aucune adresse n'a encore été saisie. La balise n'est assemblée qu'une fois le champ URL rempli, et ce champ attend une adresse complète avec le protocole : tapez https:// devant le domaine plutôt que de commencer par www.
L'intégration dépasse du bord de la page sur un téléphone.
Largeur est réglée en px. Basculez le sélecteur voisin de Largeur de px vers % et mettez le nombre à 100, le couple par défaut : le cadre prend alors la largeur de son conteneur au lieu d'un nombre de pixels fixe.
Un validateur HTML signale que l'attribut scrolling n'est pas autorisé.
Cela arrive lorsque Afficher la barre de défilement est décoché, ce qui écrit scrolling="no". Le standard HTML du WHATWG classe scrolling parmi les attributs d'iframe obsolètes et non conformes. Recochez la case et masquez le débordement en CSS dans la page intégrée.
Questions fréquemment posées
C'est un formulaire qui écrit une balise HTML <iframe> à votre place. Vous indiquez l'adresse de la page et la taille, cochez le comportement voulu, et il assemble les attributs dans le bon ordre pour que vous puissiez copier une seule ligne dans votre page. Tout ce qu'il produit est du HTML que vous pourriez taper à la main ; l'intérêt est d'obtenir du premier coup les guillemets, les unités et les noms d'attributs corrects.
Presque toujours parce que le site refuse d'être encadré. Un en-tête de réponse X-Frame-Options: DENY ou SAMEORIGIN, ou une Content-Security-Policy dont la directive frame-ancestors ne mentionne pas votre domaine, demande au navigateur de laisser le cadre vide. C'est une décision du site que vous intégrez, et aucun attribut de la balise produite ne peut l'annuler. Vérifiez d'abord le panneau Aperçu ici.
Gardez Largeur à 100 avec % sélectionné, ce qui est la valeur par défaut : le cadre suit alors la largeur du conteneur dans lequel vous le collez. La Taille reste en px, car une hauteur en pourcentage exige un parent dimensionné. Pour un rapport fixe, entourez la balise copiée d'un div auquel vous donnez aspect-ratio: 16 / 9 dans votre propre CSS ; le générateur ne produit pas de conteneur.
Utilisez l'adresse d'intégration de la vidéo, celle qui commence par youtube.com/embed/ et non le lien watch?v=, puis appuyez sur le bouton 560x315 pour la taille classique du lecteur. Laissez Autoriser plein écran coché pour que la commande plein écran fonctionne, et Chargement différé coché pour que le lecteur ne se charge qu'à l'arrivée du lecteur sur la section.
Une publication LinkedIn ne peut être encadrée qu'avec l'adresse d'intégration que LinkedIn fournit lui-même dans le menu de partage de la publication. Les URL ordinaires de profil ou de fil linkedin.com envoient des restrictions d'encadrement et apparaîtront comme un cadre vide, ici comme sur votre site. Collez l'URL dans cet outil et regardez l'Aperçu : s'il est vide, la page n'est pas intégrable.
Non. L'élément <iframe> fait toujours partie du standard HTML et n'est pas menacé. Plusieurs de ses anciens attributs sont obsolètes, dont scrolling, frameborder, marginwidth, marginheight et align : c'est pourquoi cet outil écrit les bordures dans un attribut style plutôt qu'avec frameborder. Les dimensions, allowfullscreen et loading sont d'actualité.
Un cadre est un contexte de navigation distinct : la page intégrée ne peut ni lire le DOM ni les cookies de votre page entre origines différentes, et l'inverse est vrai aussi. Les vrais risques sont de céder de l'espace écran à un site que vous ne contrôlez pas et de laisser la page intégrée tenter de rediriger la fenêtre principale. L'attribut sandbox limite cela ; ce générateur ne l'ajoute pas, saisissez-le vous-même pour du contenu non fiable.
À intégrer un contenu maintenu ailleurs : lecteur vidéo, carte, formulaire de paiement, module de réservation, démonstration d'un exemple de code, tableau de bord d'un autre outil. La page intégrée conserve ses propres scripts, styles et mises à jour : vous obtenez le contenu sans le copier et sans qu'il interfère avec le CSS de votre page.
Non. La balise écrite ne contient que src, width, height, un scrolling facultatif, un attribut style, allowfullscreen et loading. Il n'y a dans cet outil ni champ sandbox, ni allow, ni referrerpolicy. Ajoutez sandbox="allow-scripts allow-same-origin", ou une liste plus restrictive, à la main si vous encadrez un contenu que vous ne contrôlez pas.
Partout où votre page accepte du HTML brut : un bloc HTML personnalisé WordPress, un bloc de code Shopify ou Squarespace, un fichier .html statique, ou un gabarit de votre framework. Collez-le dans le <body>, pas dans le <head>. Si votre éditeur échappe les chevrons, cherchez la vue source ou code plutôt que la vue texte enrichi.