Iframe-Generator
Generieren Sie HTML-Iframe-Einbettungscodes einfach. Passen Sie Größe, Scrollen, Rahmen und responsive Optionen an.
Ein Iframe-Generator schreibt das HTML-Tag, das eine Webseite in eine andere einbettet. Tragen Sie die Adresse in URL ein, stellen Sie Breite und Größe mit der px- oder %-Auswahl neben jedem Feld ein, und der Bereich HTML-Code schreibt sich bei jedem Tastendruck neu. Mit den Voreinstellungen – 100 % breit, 600 px hoch, Bildlaufleiste an, Rahmen aus, Vollbild und Lazy Loading an – entsteht <iframe src="https://example.com" width="100%" height="600px" style="border: none;" allowfullscreen loading="lazy"></iframe>
Beliebte Werkzeuge
Über Iframe-Generator
Diese Seite baut genau ein HTML-Element: ein einzelnes <iframe>-Tag, ohne umgebendes div, ohne Stylesheet und ohne Skript. Sie geben eine URL und zwei Zahlen an, und jedes angeklickte Kästchen erscheint sofort im Bereich HTML-Code. Der Bereich Vorschau daneben stellt dieselbe Adresse in derselben Größe mit demselben Rahmen dar, sodass Sie die Einbettung sehen, bevor Sie das Tag irgendwo einfügen.
Jedes Bedienelement entspricht einem Teil des Tags. Breite und Größe haben je eine eigene px- oder %-Auswahl, und die Schnellschaltflächen unter dem Werkzeug setzen mit einem Klick 300x200, 560x315, 800x600 oder volle Breite. Bildlaufleiste ergänzt abgewählt scrolling="no". Rahmen öffnet angehakt die Felder Rahmentyp (durchgezogen, gestrichelt, gepunktet, doppelt), Rahmenbreite auf einem Regler von 1 bis 10 px und Randfarbe als Farbfeld samt Hex-Eingabe und schreibt sie in ein style-Attribut wie style="border: 4px solid #FF6600;". Vollbild erlauben ergänzt allowfullscreen, Lazy Loading ergänzt loading="lazy".
Was bewusst fehlt, ist ebenso wichtig. Das Tag trägt kein title-Attribut, kein sandbox, kein allow und kein referrerpolicy; ergänzen Sie den Titel deshalb selbst, bevor Sie es veröffentlichen, denn ein Rahmen ohne title wird von Screenreadern als unbenannter Bereich angesagt. Beachten Sie außerdem: scrolling steht auf der Liste der veralteten, nicht konformen Attribute im HTML-Standard des WHATWG, ein Validator beanstandet es also, obwohl Browser es weiterhin beachten.
Einbettbar machen kann der Generator eine fremde Seite nicht. Antwortet das Ziel mit X-Frame-Options: DENY oder SAMEORIGIN oder mit einer Content-Security-Policy-Direktive frame-ancestors, die Ihre Domain ausschließt, weigert sich der Browser, den Rahmen zu zeichnen – gleich was im Tag steht – und die Vorschau bleibt leer. Nichts von Ihren Eingaben wird verschickt: Das Tag entsteht in Ihrem Browser, und die einzige Anfrage ist die, die Ihr eigener Browser für die Vorschau stellt.
Anwendungsfälle
Anleitung
Tragen Sie die Adresse der einzubettenden Seite in das Feld URL ein; der Bereich HTML-Code bleibt leer, solange keine vorhanden ist.
Stellen Sie Breite und Größe ein und wählen Sie px oder % in der Auswahl neben jeder Zahl, oder drücken Sie eine der Schaltflächen 300x200, 560x315, 800x600 und 100 % unter dem Werkzeug.
Haken Sie Bildlaufleiste, Vollbild erlauben und Lazy Loading an oder ab. Jeder Klick fügt ein Attribut im Code hinzu oder entfernt es.
Schalten Sie Rahmen ein, um Rahmentyp, Rahmenbreite und Randfarbe einzublenden, und beobachten Sie, wie das style-Attribut im Tag erscheint.
Prüfen Sie die Vorschau: Sie zeigt dieselbe URL in derselben Größe und mit demselben Rahmen, ein leerer Rahmen bedeutet also, dass die Seite die Einbettung ablehnt.
Drücken Sie die Kopierschaltfläche oben rechts im Bereich HTML-Code, fügen Sie das Tag in Ihre Seite ein und ergänzen Sie ein title-Attribut für Screenreader.
Profi-Tipps
- Lassen Sie Breite auf % und Größe auf px. Genau dieses Paar, voreingestellt 100 % auf 600 px, lässt die Einbettung mit ihrer Spalte schrumpfen; stellt man Breite auf px, ist der Rahmen fest und läuft auf dem Telefon über den Rand.
- Ergänzen Sie nach dem Kopieren title="..." im Tag. Der Generator schreibt kein title-Attribut, und ein iframe ohne title wird als unbenannter Rahmen angesagt – der häufigste Barrierefreiheitsmangel bei Einbettungen.
- Nehmen Sie den Haken bei Bildlaufleiste nur im Notfall weg: Das schreibt scrolling="no", ein Attribut, das der HTML-Standard als veraltet führt. Den Überlauf per CSS in der eingebetteten Seite zu regeln, ist der konforme Weg.
- Randfarbe besteht aus Farbfeld und Hex-Eingabe nebeneinander. Tippen Sie #FF6600 in das Textfeld: Der Rahmen der Vorschau und das style-Attribut im HTML-Code ändern sich gemeinsam, sodass Sie eine Markenfarbe exakt treffen.
- Bleibt die Vorschau leer, obwohl der Code perfekt aussieht, hören Sie auf, am Tag zu feilen: Die Zielseite verweigert die Rahmung, und kein Attribut dieses Generators setzt ihren X-Frame-Options- oder Content-Security-Policy-Header außer Kraft.
Fehlerbehebung
Die Vorschau bleibt leer, obwohl die URL stimmt und der Code richtig aussieht.
Die gerahmte Seite lehnt es ab, über den Antwort-Header X-Frame-Options: DENY oder SAMEORIGIN oder eine Content-Security-Policy-Direktive frame-ancestors. Nutzen Sie die Einbettungs-URL, die der Dienst dafür veröffentlicht, oder verlinken Sie die Seite, statt sie zu rahmen.
Der Bereich HTML-Code zeigt nichts und die Vorschau meldet „URL zur Vorschau eingeben“.
Es wurde noch keine Adresse eingetragen. Das Tag entsteht erst, wenn das Feld URL einen Wert hat, und das Feld erwartet eine vollständige Adresse mit Protokoll: Schreiben Sie https:// vor die Domain, statt mit www zu beginnen.
Die Einbettung ragt auf dem Telefon über den Seitenrand hinaus.
Breite ist in px eingestellt. Schalten Sie die Auswahl neben Breite von px auf % und setzen Sie die Zahl auf 100, das voreingestellte Paar; der Rahmen nimmt dann die Breite seines Containers statt einer festen Pixelzahl.
Ein HTML-Validator meldet, das Attribut scrolling sei nicht erlaubt.
Das passiert, wenn der Haken bei Bildlaufleiste fehlt, denn dann wird scrolling="no" geschrieben. Der HTML-Standard des WHATWG führt scrolling unter den veralteten, nicht konformen iframe-Attributen. Setzen Sie den Haken wieder und regeln Sie den Überlauf per CSS in der eingebetteten Seite.
Häufig gestellte Fragen
Ein Formular, das ein HTML-<iframe>-Tag für Sie schreibt. Sie geben Adresse und Größe an, haken das gewünschte Verhalten an, und es setzt die Attribute in der richtigen Reihenfolge zusammen, sodass Sie eine Zeile in Ihre Seite kopieren können. Alles Erzeugte ist gewöhnliches HTML, das Sie auch von Hand tippen könnten; der Nutzen liegt darin, Anführungszeichen, Einheiten und Attributnamen auf Anhieb richtig zu haben.
Fast immer, weil die Website die Rahmung ablehnt. Ein Antwort-Header X-Frame-Options: DENY oder SAMEORIGIN oder eine Content-Security-Policy, deren frame-ancestors-Direktive Ihre Domain nicht nennt, weist den Browser an, den Rahmen leer zu lassen. Das entscheidet die eingebettete Seite, und kein Attribut im erzeugten Tag hebt es auf. Prüfen Sie zuerst hier die Vorschau.
Lassen Sie Breite auf 100 mit ausgewähltem %, so ist es voreingestellt; der Rahmen folgt dann der Breite des Containers, in den Sie ihn einfügen. Die Größe bleibt in px, weil eine Höhe in Prozent ein dimensioniertes Elternelement braucht. Für ein festes Seitenverhältnis umschließen Sie das kopierte Tag mit einem div und geben diesem im eigenen CSS aspect-ratio: 16 / 9; der Generator erzeugt keinen Container.
Nehmen Sie die Einbettungsadresse des Videos unter youtube.com/embed/, nicht den watch?v=-Link, und drücken Sie die Schaltfläche 560x315 für die klassische Playergröße. Lassen Sie Vollbild erlauben angehakt, damit die Vollbildtaste funktioniert, und Lazy Loading angehakt, damit der Player erst beim Scrollen geladen wird.
Ein LinkedIn-Beitrag lässt sich nur über die Einbettungsadresse rahmen, die LinkedIn selbst im Teilen-Menü des Beitrags anbietet. Gewöhnliche linkedin.com-Profil- und Feed-URLs senden Rahmungsbeschränkungen und erscheinen hier wie auf Ihrer Seite als leerer Rahmen. Fügen Sie die URL hier ein und sehen Sie in die Vorschau: Bleibt sie leer, ist die Seite nicht einbettbar.
Nein. Das Element <iframe> ist fester Bestandteil des HTML-Standards. Veraltet sind mehrere seiner alten Attribute, darunter scrolling, frameborder, marginwidth, marginheight und align – deshalb schreibt dieses Werkzeug Rahmen als style-Attribut statt als frameborder. Größenangaben, allowfullscreen und loading sind aktuell.
Ein Rahmen ist ein eigener Browsing-Kontext: Die eingebettete Seite kann über Origin-Grenzen hinweg weder DOM noch Cookies Ihrer Seite lesen, und umgekehrt ebenso wenig. Die echten Risiken sind, dass Sie Bildschirmfläche an eine fremde Seite abgeben und dass die eingebettete Seite versuchen kann, das oberste Fenster umzuleiten. Das Attribut sandbox begrenzt das; dieser Generator setzt es nicht, tippen Sie es bei unbekannten Inhalten selbst.
Zum Einbetten von Inhalten, die anderswo gepflegt werden: Videoplayer, Karte, Bezahlformular, Buchungs-Widget, laufende Demo eines Codebeispiels, Dashboard aus einem anderen Werkzeug. Die eingebettete Seite behält eigene Skripte, Styles und Aktualisierungen – Sie bekommen den Inhalt, ohne ihn zu kopieren und ohne dass er Ihr CSS stört.
Nein. Das geschriebene Tag enthält nur src, width, height, optional scrolling, ein style-Attribut, allowfullscreen und loading. Ein Feld für sandbox, allow oder referrerpolicy gibt es hier nicht. Ergänzen Sie sandbox="allow-scripts allow-same-origin" oder eine engere Liste von Hand, wenn Sie fremde Inhalte rahmen.
Überall dort, wo Ihre Seite rohes HTML annimmt: ein WordPress-Block Individuelles HTML, ein Codeblock in Shopify oder Squarespace, eine statische .html-Datei oder ein Template Ihres Frameworks. Fügen Sie es in den <body> ein, nicht in den <head>. Maskiert Ihr Editor die spitzen Klammern, wechseln Sie in die Quelltext- statt in die Rich-Text-Ansicht.