iFrame-Generator

Geben Sie eine beliebige URL ein und erhalten Sie kostenlos einen sauberen iframe-Code, mit fester Größe oder responsiv, um eine Seite, ein Formular oder eine App in Ihre Website einzubetten. Keine Anmeldung nötig.
iFrame-Generator
Jede Seite, die Einbettung erlaubt, z. B. https://example.com/booking/

Die Vorschau ist leer oder zeigt „Verbindung abgelehnt“? Die Website erlaubt es anderen Websites nicht, sie in einem Frame anzuzeigen (über ihren X-Frame-Options- oder Content-Security-Policy-Header), und nur ihr Inhaber kann das ändern. Mehr erfahren

Formulare, Rezensionen oder Feeds einbetten? Elfsight widgets ansehen →
Was die Seite im Frame darüber erfährt, woher der Besucher kam (das Attribut referrerpolicy).
Proportional: Die Höhe folgt der Breite, wie bei einem Video. Fest: eine festgelegte Höhe in Pixeln.

Seite einbetten

<div style="position:relative;width:100%;aspect-ratio:16 / 9;">
  <iframe src="https://example.com/" title="example.com" loading="lazy" style="position:absolute;inset:0;width:100%;height:100%;border:0;"></iframe>
</div>
<p style="margin:4px auto 0;text-align:center;font:11px/1.4 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;color:#a3a7b0;">Erstellt mit <a href="https://de.elfsight.com/tools/iframe-generator/" target="_blank" rel="noopener" style="color:inherit;text-decoration:none;">Elfsight</a></p>

  1. Klicken Sie oben auf Code kopieren, um ihn zu kopieren.
  2. Öffnen Sie die HTML-Datei oder die Vorlage der Seite.
  3. Fügen Sie den Code innerhalb von <body> ein, dort wo der Inhalt erscheinen soll.
  4. Speichern und laden Sie die Seite hoch und öffnen Sie sie zur Kontrolle im Browser.

Formulare, Rezensionen oder Feeds einbetten? Elfsight-Widgets erledigen das ohne iframes und passen zum Design Ihrer Website. Elfsight widgets ansehen →

Bevor Sie gehen

Formulare, Rezensionen oder Feeds einbetten? Elfsight-Widgets erledigen das ohne iframes und passen zum Design Ihrer Website.

Elfsight widgets ansehen →
Oder teilen Sie dieses kostenlose Tool:

iFrame-Generator im Vergleich zum Schreiben des iframes von Hand

Ein iframe ist eine Zeile HTML, doch die Attribute, die ihn barrierefrei, schnell und sicher machen, sind leicht zu vergessen oder falsch zu schreiben. Das ändert sich, wenn Sie ihn mit dem Generator erstellen.
Den iframe von Hand schreiben
Dieser Generator
Attribute
Sie müssen sich jeden Attributnamen und seine genauen Werte merken.
Wählen Sie Attribute aus einer Liste, mit einer kurzen Erklärung neben jedem.
Barrierefreier Titel
Wird oft weggelassen, sodass Screenreader-Nutzer nicht wissen, was der Frame enthält.
Fragt nach einem title, damit der Frame für Hilfstechnologien beschriftet ist.
Sandbox
Sie tippen die allow-*-Token selbst und schlagen nach, was jedes freischaltet.
Ein Kontrollkästchen für jedes Token, mit einer einfachen Erklärung, was es erlaubt.
Responsive Größe
Sie schreiben das CSS für ein Seitenverhältnis oder eine feste Höhe.
Wählen Sie ein Seitenverhältnis oder eine feste Höhe; der Code enthält die Größenangaben.
Kann diese Seite eingebettet werden?
Sie erfahren es nach der Veröffentlichung, wenn der Frame leer erscheint.
Prüft die Header X-Frame-Options und frame-ancestors der Seite, bevor Sie den Code kopieren.
Video- und Formular-Links
Eine YouTube-Wiedergabeseite oder ein Google-Formular-Link, unverändert eingefügt, lädt eventuell nicht oder sieht falsch aus.
Erkennt YouTube-, Vimeo- und Google-Formular-Links und verweist Sie auf den passenden Generator.

Attribute

Den iframe von Hand schreiben

Sie müssen sich jeden Attributnamen und seine genauen Werte merken.

Dieser Generator

Wählen Sie Attribute aus einer Liste, mit einer kurzen Erklärung neben jedem.

Barrierefreier Titel

Den iframe von Hand schreiben

Wird oft weggelassen, sodass Screenreader-Nutzer nicht wissen, was der Frame enthält.

Dieser Generator

Fragt nach einem title, damit der Frame für Hilfstechnologien beschriftet ist.

Sandbox

Den iframe von Hand schreiben

Sie tippen die allow-*-Token selbst und schlagen nach, was jedes freischaltet.

Dieser Generator

Ein Kontrollkästchen für jedes Token, mit einer einfachen Erklärung, was es erlaubt.

Responsive Größe

Den iframe von Hand schreiben

Sie schreiben das CSS für ein Seitenverhältnis oder eine feste Höhe.

Dieser Generator

Wählen Sie ein Seitenverhältnis oder eine feste Höhe; der Code enthält die Größenangaben.

Kann diese Seite eingebettet werden?

Den iframe von Hand schreiben

Sie erfahren es nach der Veröffentlichung, wenn der Frame leer erscheint.

Dieser Generator

Prüft die Header X-Frame-Options und frame-ancestors der Seite, bevor Sie den Code kopieren.

Video- und Formular-Links

Den iframe von Hand schreiben

Eine YouTube-Wiedergabeseite oder ein Google-Formular-Link, unverändert eingefügt, lädt eventuell nicht oder sieht falsch aus.

Dieser Generator

Erkennt YouTube-, Vimeo- und Google-Formular-Links und verweist Sie auf den passenden Generator.

Referenz der iframe-Attribute

Was jedes Attribut bewirkt und wann Sie es verwenden. Sicherheitstipp: Geben Sie Inhalten von Dritten die geringsten Berechtigungen, die sie brauchen.
Option
Was sie bewirkt
Werte
Hinweise
src
Die Adresse der Seite, die im Frame angezeigt wird.
Eine vollständige URL
Verwenden Sie eine https://-Adresse. Auf einer HTTPS-Website blockieren Browser Frames, die über einfaches http:// geladen werden.
title
Beschriftet den Frame für Screenreader.
Kurzer Text, z. B. „Karte der Geschäftsstandorte“
Beschreiben Sie den Inhalt kurz. Ohne ihn müssen Menschen, die Hilfstechnologie nutzen, den Frame betreten, um herauszufinden, was darin ist.
width / height
Legt die Framegröße in Pixeln fest.
Zahlen; ohne sie ist der Frame 300 × 150
Für einen Frame, der mit der Seite skaliert, verwenden Sie statt fester Zahlen CSS (width: 100% und aspect-ratio).
loading
Steuert, wann der Browser den Frame lädt.
eager (Standard), lazy
lazy wartet, bis der Frame nahe am sichtbaren Bereich ist, was das erste Laden der Seite beschleunigt. Gut für Frames weiter unten auf der Seite.
allow
Gewährt der Seite im Frame Zugriff auf Browserfunktionen (Permissions Policy).
Eine durch Semikolons getrennte Liste, z. B. fullscreen; autoplay
Listen Sie nur die Funktionen auf, die der Inhalt braucht. Kamera, Mikrofon und Standort verdienen besondere Sorgfalt.
allowfullscreen
Lässt den Frame in den Vollbildmodus wechseln.
Vorhanden oder nicht vorhanden
Ein veraltetes Attribut. Das moderne Äquivalent ist allow="fullscreen"; viele Einbettungscodes enthalten beide.
referrerpolicy
Steuert, wie viel von der Adresse Ihrer Seite an die Website im Frame gesendet wird.
no-referrer, origin, strict-origin-when-cross-origin (Standard) und andere
Der Standard sendet nur Ihre Domain an andere Websites. Vermeiden Sie unsafe-url: Es sendet die vollständige Adresse, auch an unsichere Websites.
sandbox
Wendet strenge Einschränkungen auf die Seite im Frame an. Jedes allow-*-Token hebt eine Einschränkung auf.
Leer (alle Einschränkungen) oder Token wie allow-scripts, allow-forms, allow-popups
Verwenden Sie es für Inhalte, denen Sie nicht ganz vertrauen. Kombinieren Sie allow-scripts und allow-same-origin nicht für eine Seite Ihrer eigenen Website: Zusammen erlauben sie der Seite, die Sandbox zu entfernen.

src

Was sie bewirkt

Die Adresse der Seite, die im Frame angezeigt wird.

Werte

Eine vollständige URL

Hinweise

Verwenden Sie eine https://-Adresse. Auf einer HTTPS-Website blockieren Browser Frames, die über einfaches http:// geladen werden.

title

Was sie bewirkt

Beschriftet den Frame für Screenreader.

Werte

Kurzer Text, z. B. „Karte der Geschäftsstandorte“

Hinweise

Beschreiben Sie den Inhalt kurz. Ohne ihn müssen Menschen, die Hilfstechnologie nutzen, den Frame betreten, um herauszufinden, was darin ist.

width / height

Was sie bewirkt

Legt die Framegröße in Pixeln fest.

Werte

Zahlen; ohne sie ist der Frame 300 × 150

Hinweise

Für einen Frame, der mit der Seite skaliert, verwenden Sie statt fester Zahlen CSS (width: 100% und aspect-ratio).

loading

Was sie bewirkt

Steuert, wann der Browser den Frame lädt.

Werte

eager (Standard), lazy

Hinweise

lazy wartet, bis der Frame nahe am sichtbaren Bereich ist, was das erste Laden der Seite beschleunigt. Gut für Frames weiter unten auf der Seite.

allow

Was sie bewirkt

Gewährt der Seite im Frame Zugriff auf Browserfunktionen (Permissions Policy).

Werte

Eine durch Semikolons getrennte Liste, z. B. fullscreen; autoplay

Hinweise

Listen Sie nur die Funktionen auf, die der Inhalt braucht. Kamera, Mikrofon und Standort verdienen besondere Sorgfalt.

allowfullscreen

Was sie bewirkt

Lässt den Frame in den Vollbildmodus wechseln.

Werte

Vorhanden oder nicht vorhanden

Hinweise

Ein veraltetes Attribut. Das moderne Äquivalent ist allow="fullscreen"; viele Einbettungscodes enthalten beide.

referrerpolicy

Was sie bewirkt

Steuert, wie viel von der Adresse Ihrer Seite an die Website im Frame gesendet wird.

Werte

no-referrer, origin, strict-origin-when-cross-origin (Standard) und andere

Hinweise

Der Standard sendet nur Ihre Domain an andere Websites. Vermeiden Sie unsafe-url: Es sendet die vollständige Adresse, auch an unsichere Websites.

sandbox

Was sie bewirkt

Wendet strenge Einschränkungen auf die Seite im Frame an. Jedes allow-*-Token hebt eine Einschränkung auf.

Werte

Leer (alle Einschränkungen) oder Token wie allow-scripts, allow-forms, allow-popups

Hinweise

Verwenden Sie es für Inhalte, denen Sie nicht ganz vertrauen. Kombinieren Sie allow-scripts und allow-same-origin nicht für eine Seite Ihrer eigenen Website: Zusammen erlauben sie der Seite, die Sandbox zu entfernen.

MDN Web Docs: das iframe-Element ↗

Warum sich eine Website nicht in einem iframe öffnet

Der Frame ist leer oder zeigt „Verbindung abgelehnt“.

Die Website sendet einen X-Frame-Options-Header. DENY blockiert jede Einbettung in Frames; SAMEORIGIN erlaubt sie nur auf den eigenen Seiten der Website. Die Website hat die Einbettung verboten, und das lässt sich von Ihrer Seite aus nicht umgehen. Verlinken Sie stattdessen auf die Seite oder fragen Sie den Websitebetreiber, ob er eine Einbettung anbietet.

Die Sicherheitsrichtlinie der Website blockiert den Frame.

Die Website sendet Content-Security-Policy mit frame-ancestors, das die Websites auflistet, die sie einbetten dürfen ('none' bedeutet niemand). Ist sie vorhanden, folgen Browser ihr statt X-Frame-Options. Nur der Websitebetreiber kann Ihre Domain zur Liste hinzufügen.

Der Frame lädt für sich allein, aber nicht auf Ihrer HTTPS-Website.

Das src beginnt mit http://. Browser blockieren unsichere Frames auf sicheren Seiten und stufen sie nicht automatisch hoch. Ändern Sie die Adresse in https://; hat die Website keine HTTPS-Version, lässt sie sich auf einer sicheren Seite nicht einbetten.

Ein YouTube-Link zeigt einen Fehler statt des Videos.

Normale YouTube-Wiedergabeseiten verbieten das Einbetten in Frames. Verwenden Sie die Einbettungsadresse des Videos (youtube.com/embed/…) oder den passenden YouTube-Generator.

Die Seite lädt, aber Buttons, Formulare oder Links darin tun nichts.

Das Attribut sandbox blockiert sie. Fügen Sie nur die Token hinzu, die Sie brauchen: allow-scripts für interaktive Inhalte, allow-forms zum Absenden von Formularen, allow-popups für Links, die einen neuen Tab öffnen.

Das Video wechselt nicht in den Vollbildmodus, oder Kamera oder Mikrofon funktionieren nicht.

Diese Funktionen müssen im Attribut allow gewährt werden, z. B. allow="fullscreen; camera; microphone".

Ihr Website-Baukasten entfernt den Code nach dem Speichern.

Manche Editoren entfernen iframes aus normalen Textblöcken. Fügen Sie den Code in einen benutzerdefinierten HTML- oder Einbettungsblock ein.

So erstellen Sie einen iframe

  1. Seitenadresse eingeben

    Fügen Sie die URL der Seite ein, die Sie anzeigen möchten.

  2. Größe und Verhalten festlegen

    Wählen Sie die Größe, halten Sie ihn responsiv und erlauben Sie bei Bedarf Scrollen oder Vollbild.

  3. Vorschau prüfen

    Manche Websites erlauben es nicht, in einem Frame angezeigt zu werden: Die Vorschau zeigt es sofort.

  4. Code kopieren

    Fügen Sie den Code in einen HTML-Block Ihrer Website ein.

Häufig gestellte Fragen

Weitere Einbettungscode-Generatoren

YouTube-Einbettungscode-Generator

Fügen Sie einen beliebigen YouTube-Link ein und erhalten Sie in Sekunden einen responsiven Einbettungscode.YouTube-Einbettungscode-Generator

Video-Einbettungscode-Generator

Betten Sie ein Video ein, das überall liegen kann: MP4, Google Drive, Dropbox, Loom oder Wistia.Video-Einbettungscode-Generator

PDF-Einbettungsgenerator

Zeigen Sie eine PDF-Speisekarte, Preisliste oder Broschüre direkt auf der Seite.PDF-Einbettungsgenerator