Générateur d'iframe : créez le code d'intégration de n'importe quelle URL
Générateur d'iframe
Générateur d'iframe : code d'intégration responsive avec aperçu | We.Inc
Créez le code iframe de n'importe quelle URL : ratio d'aspect responsive ou taille fixe, lazy loading, title, jetons sandbox, allow et referrer policy, avec un aperçu en direct.
Collez l'adresse à intégrer, donnez un titre au cadre, choisissez une forme responsive ou une taille fixe, et ce générateur écrit la balise iframe avec lazy loading, jetons sandbox, permissions et referrer policy. L'aperçu ci-dessous charge votre adresse pour que vous vérifiiez que le site autorise bien l'intégration avant de coller le code.
Ce que chaque option écrit
Option
Attribut ou style
Valeur par défaut dans cet outil
Titre
title="..."
Obligatoire, utilisé par les lecteurs d'écran
Forme responsive
style="width:100%;aspect-ratio:16 / 9"
Taille fixe
width et height
Par défaut, le navigateur utilise 300 sur 150
Lazy loading
loading="lazy"
Activé
Sandbox
sandbox="..."
Désactivé ; cochez des jetons pour restreindre
Permissions
allow="fullscreen; ..."
fullscreen uniquement
Referrer
referrerpolicy="..."
La plupart des extraits d'iframe trouvés en ligne oublient au moins un des éléments dont une intégration moderne a besoin : un titre pour les technologies d'assistance, le lazy loading pour ne pas ralentir le premier écran, une taille responsive et le plus petit ensemble de permissions possible. Cet outil les écrit tous pour n'importe quelle adresse. Pour les vidéos, cartes et pages de réservation de fournisseurs connus, notre générateur de code d'intégration convertit aussi leurs liens de partage en liens d'intégration.
Collez l'adresse https complète de la page à intégrer et écrivez un titre court qui dit ce que c'est.
Choisissez Responsive avec un ratio d'aspect, ou Fixe avec une largeur et une hauteur en pixels.
Laissez le lazy loading activé, sauf si l'intégration se trouve tout en haut de la page.
Cochez des jetons sandbox si le contenu n'est pas entièrement digne de confiance, et ne cochez que les permissions dont l'intégration a besoin.
Appuyez sur Charger l'aperçu pour voir l'intégration exactement telle que le code la décrit, puis copiez le code.
Si l'aperçu affiche un cadre gris indiquant un refus de connexion, le site interdit l'intégration. Aucun attribut ne peut y remédier ; consultez notre guide sur cette erreur.
Utilisez l'adresse d'intégration propre au fournisseur pour les vidéos et les cartes. Leurs adresses de pages normales sont souvent bloquées en iframe.
Gardez allow aussi réduit que possible. Chaque fonctionnalité listée, comme la caméra ou la géolocalisation, est proposée au site intégré.
Placez les intégrations lourdes sous le premier écran pour que le lazy loading puisse faire son travail.
Ne cochez pas à la fois allow-scripts et allow-same-origin pour du contenu de votre propre site ; ensemble, ils annulent le sandbox.
Questions fréquentes
Comment rendre une iframe responsive ?
Donnez-lui width: 100% et un aspect-ratio comme 16 / 9, et laissez la hauteur automatique. Le navigateur conserve alors la forme à toutes les largeurs. L'ancienne astuce du conteneur avec padding-top n'est plus nécessaire maintenant que aspect-ratio est largement pris en charge.
Que fait loading="lazy" sur une iframe ?
Il retarde le chargement jusqu'à ce que le cadre approche de la partie visible de la page. eager, qui charge immédiatement, est la valeur par défaut. Le lazy loading économise des données et accélère le premier affichage pour les cadres situés plus bas.
Pourquoi chaque iframe devrait-elle avoir un titre ?
Les utilisateurs de lecteurs d'écran passent d'un cadre à l'autre grâce à leurs titres. Un titre clair, comme "Calendrier de réservation du studio de Leeds", leur indique ce qu'il contient avant d'y entrer.
Que mettre dans l'attribut allow ?
Uniquement les fonctionnalités dont l'intégration a besoin, séparées par des points-virgules, par exemple allow="fullscreen; picture-in-picture". Lister une fonctionnalité sans origine l'autorise pour l'origine de src. allow peut seulement restreindre ce que l'en-tête Permissions-Policy de la page autorise, jamais l'élargir.
L'aperçu envoie-t-il mes données quelque part ?
Aucune donnée ne nous est envoyée. Le code est généré dans cette page. L'aperçu est une iframe ordinaire dans votre navigateur : le site intégré reçoit donc une visite normale de votre part, comme lorsque vos visiteurs la chargent.
Une checklist pour chaque intégration
Titre, taille, chargement, permissions, sandbox, referrer : six décisions, et le générateur rend chacune explicite. Les valeurs par défaut ici sont les plus sûres : lazy, responsive, une referrer policy qui n'envoie que l'origine entre sites, et aucune permission en plus de fullscreen.
Après avoir collé le code, testez-le sur une largeur de téléphone. Un cadre avec une largeur fixe en pixels est la cause la plus fréquente de défilement horizontal sur mobile.
Quand l'aperçu reste vide ou refuse
Un cadre d'erreur gris signifie que le site intégré a envoyé un en-tête qui interdit l'intégration. Un cadre blanc vide signifie souvent que le site a besoin de scripts ou de formulaires qu'un jeton sandbox coché bloque : décochez sandbox et réessayez pour distinguer les deux cas.
Certains sites détectent aussi qu'ils sont intégrés et affichent une autre page. Ce comportement relève de leur choix et ne peut pas être modifié de l'extérieur.
Confidentialité et performance
Chaque iframe est une page complète d'un autre site, avec ses propres scripts et parfois ses propres cookies. Mentionnez le contenu tiers intégré dans votre politique de confidentialité et privilégiez les modes d'intégration respectueux de la vie privée quand le fournisseur en propose.
Si une intégration est lourde et facultative, envisagez un espace réservé à charger au clic : affichez une image et un bouton, et n'insérez l'iframe que lorsque quelqu'un la demande.
Modèles prêts à l'emploi
Cadre responsive avec aspect-ratio
Redimensionnez la fenêtre et le cadre garde sa forme. La page intérieure vient ici de srcdoc, pour que l'exemple fonctionne hors ligne.
Espace réservé à charger au clic
Rien de l'autre site ne se charge avant l'appui sur le bouton. La balise template contient la vraie iframe.
Créez votre iframe
Adresse à intégrer (https)
Titre (décrivez le contenu)
Taille
Responsive
Fixe
Ratio d'aspect
Largeur (px)
Hauteur (px)
Lazy load (loading="lazy")
Mettre le contenu en sandbox
Jetons sandbox
Permissions (allow)
Referrer policy
Votre code
Copier le code
Charger l'aperçu
L'aperçu charge l'adresse dans votre navigateur. Un cadre d'erreur gris signifie que ce site refuse d'être intégré.
Saisissez une adresse complète commençant par https:// ou http://.