iframe-Generator: Embed-Code für jede URL erstellen
iframe-Generator
iframe-Generator: Responsiver Embed-Code mit Vorschau | We.Inc
Erstelle iframe-Code für jede URL: responsives Seitenverhältnis oder feste Größe, Lazy Loading, Titel, sandbox-Tokens, allow und Referrer-Policy, mit Live-Vorschau.
Füge die Adresse ein, die du einbetten willst, gib dem Frame einen Titel, wähle eine responsive Form oder eine feste Größe, und dieser Generator schreibt den iframe-Tag mit Lazy Loading, sandbox-Tokens, Berechtigungen und einer Referrer-Policy. Die Vorschau unten lädt deine Adresse, damit du prüfen kannst, ob die Website das Einbetten überhaupt erlaubt, bevor du den Code einfügst.
Was jede Option schreibt
Option
Attribut oder Style
Standard in diesem Tool
Titel
title="..."
Pflicht, wird von Screenreadern genutzt
Responsive Form
style="width:100%;aspect-ratio:16 / 9"
Feste Größe
width und height
Browserstandard ist 300 mal 150
Lazy Loading
loading="lazy"
An
Sandbox
sandbox="..."
Aus; Tokens anhaken, um einzuschränken
Berechtigungen
allow="fullscreen; ..."
nur fullscreen
Referrer
referrerpolicy="..."
Den meisten iframe-Snippets im Netz fehlt mindestens eines der Dinge, die ein modernes Embed braucht: ein Titel für Hilfstechnologien, Lazy Loading, damit der erste Bildschirm nicht ausgebremst wird, eine responsive Größe und die kleinstmögliche Menge an Berechtigungen. Dieses Tool schreibt all das für jede Adresse. Für Videos, Karten und Buchungsseiten bekannter Anbieter wandelt unser Embed-Code-Generator außerdem deren Teilen-Links in Embed-Links um.
Füge die vollständige https-Adresse der einzubettenden Seite ein und schreib einen kurzen Titel, der sagt, was es ist.
Wähle Responsiv mit einem Seitenverhältnis oder Fest mit Breite und Höhe in Pixeln.
Lass Lazy Loading eingeschaltet, außer das Embed steht ganz oben auf der Seite.
Hake sandbox-Tokens an, wenn der Inhalt nicht völlig vertrauenswürdig ist, und hake nur die Berechtigungen an, die das Embed braucht.
Drücke Vorschau laden, um das Embed genau so zu sehen, wie der Code es beschreibt, und kopiere dann den Code.
Zeigt die Vorschau ein graues Feld mit der Meldung, dass die Verbindung abgelehnt wurde, verbietet die Website das Einbetten. Kein Attribut kann das ändern; sieh dir unseren Leitfaden zu diesem Fehler an.
Nutze für Videos und Karten die eigene Embed-Adresse des Anbieters. Die normalen Seitenadressen sind fürs Einbetten oft gesperrt.
Halte allow so klein wie möglich. Jede Funktion, die du aufführst, etwa Kamera oder Standort, wird der eingebetteten Website angeboten.
Platziere schwere Embeds unterhalb des ersten Bildschirms, damit Lazy Loading seine Arbeit machen kann.
Hake bei Inhalten von deiner eigenen Website nicht sowohl allow-scripts als auch allow-same-origin an; zusammen heben sie die sandbox auf.
Häufige Fragen
Wie mache ich ein iframe responsiv?
Gib ihm width: 100% und ein aspect-ratio wie 16 / 9 und lass die Höhe automatisch. Der Browser behält die Form dann bei jeder Breite bei. Der ältere Trick mit einem padding-top-Wrapper ist nicht mehr nötig, seit aspect-ratio breit unterstützt wird.
Was bewirkt loading="lazy" bei einem iframe?
Es verschiebt das Laden, bis der Frame in die Nähe des sichtbaren Seitenbereichs kommt. eager, das sofort lädt, ist der Standard. Lazy Loading spart Daten und beschleunigt die erste Ansicht bei Frames weiter unten.
Warum sollte jedes iframe einen Titel haben?
Screenreader-Nutzer wechseln anhand der Titel zwischen Frames. Ein klarer Titel wie "Buchungskalender für das Studio in Leeds" sagt ihnen, was drin ist, bevor sie den Frame betreten.
Was sollte ich ins allow-Attribut schreiben?
Nur die Funktionen, die das Embed braucht, getrennt durch Semikolons, zum Beispiel allow="fullscreen; picture-in-picture". Eine Funktion ohne Origin aufzuführen erlaubt sie für den Origin in src. allow kann nur einschränken, was der eigene Permissions-Policy-Header der Seite erlaubt, es aber nie erweitern.
Sendet die Vorschau meine Daten irgendwohin?
An uns gehen keine Daten. Der Code wird in dieser Seite erstellt. Die Vorschau ist ein gewöhnliches iframe in deinem Browser, die eingebettete Website erhält also einen normalen Besuch von dir, genau wie wenn deine Besucher sie laden.
Eine Checkliste für jedes Embed
Titel, Größe, Laden, Berechtigungen, sandbox, Referrer: sechs Entscheidungen, und der Generator macht jede davon ausdrücklich. Die Standardwerte hier sind die sicheren: lazy, responsiv, eine Referrer-Policy, die websiteübergreifend nur den Origin sendet, und keine zusätzlichen Berechtigungen außer fullscreen.
Teste den Code nach dem Einfügen in Handybreite. Ein Frame mit fester Pixelbreite ist die häufigste Ursache für seitliches Scrollen auf Mobilgeräten.
Wenn die Vorschau leer bleibt oder ablehnt
Ein graues Fehlerfeld bedeutet, dass die eingebettete Website einen Header gegen das Einbetten gesendet hat. Ein leerer weißer Frame bedeutet oft, dass die Website Skripte oder Formulare braucht, die ein angehaktes sandbox-Token blockiert: Hake sandbox ab und versuche es erneut, um beides zu unterscheiden.
Manche Websites erkennen außerdem, dass sie eingebettet sind, und zeigen eine andere Seite. Das entscheiden sie selbst, und von außen lässt es sich nicht ändern.
Datenschutz und Performance
Jedes iframe ist eine vollständige Seite einer anderen Website, mit eigenen Skripten und womöglich eigenen Cookies. Erwähne eingebettete Inhalte Dritter in deiner Datenschutzerklärung und nutze datenschutzfreundliche Embed-Modi, wo der Anbieter sie anbietet.
Ist ein Embed groß und optional, erwäge einen Platzhalter, der erst per Klick lädt: Zeig ein Bild und einen Button und füge das iframe erst ein, wenn jemand es anfordert.
Fertige Muster
Responsiver Frame mit aspect-ratio
Ändere die Fenstergröße, und der Frame behält seine Form. Die innere Seite stammt hier aus srcdoc, damit das Beispiel offline funktioniert.
Platzhalter, der per Klick lädt
Von der anderen Website lädt nichts, bis der Button gedrückt wird. Der template-Tag enthält das echte iframe.
Erstelle dein iframe
Einzubettende Adresse (https)
Titel (beschreibe den Inhalt)
Größe
Responsiv
Fest
Seitenverhältnis
Breite (px)
Höhe (px)
Lazy Loading (loading="lazy")
Inhalt in eine sandbox stecken
sandbox-Tokens
Berechtigungen (allow)
Referrer-Policy
Dein Code
Code kopieren
Vorschau laden
Die Vorschau lädt die Adresse in deinem Browser. Ein graues Fehlerfeld bedeutet, dass die Website das Einbetten ablehnt.
Gib eine vollständige Adresse ein, die mit https:// oder http:// beginnt.