HTML iframe: Kalender, Karte und Formular einbetten

Q: Wie mache ich ein iframe responsiv?

Bei Videos und Karten mit width: 100% und aspect-ratio: 16 / 9, weil sie ein festes Seitenverhältnis haben. Bei Kalendern und Formularen mit width: 100% und einer festen Höhe in Pixeln, weil sie kein festes Verhältnis haben. Setze die Höhe eher zu groß, sonst wird der Absenden-Knopf abgeschnitten.

Kurz gesagt: Ein <iframe> ist ein Fenster in deiner Seite, in dem eine fremde Seite angezeigt wird — der Termin-Kalender, das Newsletter-Formular, die Karte. Du brauchst dafür die Einbettungs-Adresse des Anbieters und zwei Zeilen CSS, damit es auf dem Handy passt.

Der Grundaufbau

<iframe
  src="https://anbieter.example/einbetten/abc123"
  title="Termin bei mir buchen"
  loading="lazy"></iframe>

Vier Angaben, mehr braucht es meist nicht:

Angabe	Was sie macht	Pflicht?
`src`	die Adresse, die im Fenster erscheint	ja
`title`	Beschreibung für Screenreader	ja — sonst hören blinde Nutzer nur „Rahmen"
`loading="lazy"`	lädt erst, wenn es ins Blickfeld kommt	sehr empfohlen
`allowfullscreen`	erlaubt Vollbild — nur bei Videos nötig	optional

loading="lazy" ist hier wichtiger als bei Bildern. Ein eingebetteter Kalender lädt eine komplette fremde Seite samt deren JavaScript. Steht er weit unten auf deiner Seite, verzögert er ohne diese Angabe den Aufbau von allem darüber.

Wofür Solo-Selbstständige iframes tatsächlich brauchen

Was	Wo du die Adresse findest
Termin-Kalender	beim Anbieter unter „Einbetten", „Embed" oder „Auf Website einbinden"
Newsletter-Formular	im E-Mail-Tool unter „Formular" → „Einbettungscode"
Karte	im Kartendienst über „Teilen" → „Karte einbetten"
Video	siehe Video einfügen — dort ausführlich
Umfrage oder Buchungsstrecke	beim jeweiligen Dienst unter „Einbetten"

Der praktische Hinweis: Suche beim Anbieter nach „Einbetten" oder „Embed" — du bekommst dort meist den fertigen <iframe>-Code zum Kopieren. Baue ihn nicht selbst aus der normalen Adresse zusammen; viele Dienste brauchen eine eigene Einbettungs-Adresse.

Damit es auf dem Handy passt

Ein <iframe> ist standardmäßig 300 × 150 Pixel groß. Das ist für fast jeden Zweck zu klein — der häufigste Grund für „der Kalender ist ja winzig".

/* Für Kalender und Formulare: feste Höhe, volle Breite */
iframe.einbettung {
  width: 100%;
  height: 700px;
  border: 0;
  border-radius: 12px;
}

/* Für Videos und Karten: über das Seitenverhältnis */
iframe.video {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
}

Der Unterschied ist wichtig. Videos und Karten haben ein festes Seitenverhältnis — dort ist aspect-ratio richtig. Kalender und Formulare haben keins; sie brauchen eine feste Höhe in Pixeln, und die muss großzügig sein.

Der klassische Fehler bei Formularen: Höhe zu knapp gesetzt. Dann erscheint im Fenster ein eigener Scrollbalken, und der Absenden-Knopf ist unten abgeschnitten. Besucher merken nicht, dass sie im Rahmen scrollen müssen — sie brechen ab. Prüfe die Einbettung auf dem Handy und setze die Höhe eher zu groß als zu klein.

Warum manche Seiten sich nicht einbetten lassen

Du kannst nicht jede Seite einbetten. Versuch es mit einer großen Website, und im Rahmen bleibt es weiß oder es erscheint „Verbindung abgelehnt".

Der Grund: Betreiber können die Einbettung ihrer Seiten technisch verbieten — über eine Server-Einstellung namens X-Frame-Options oder eine Content-Security-Policy. Google, Facebook, Banken und die meisten Shops tun das.

Das ist keine Fehleinstellung auf deiner Seite, und du kannst es nicht umgehen. Es schützt vor „Clickjacking": Sonst könnte jemand deine Anmeldeseite in einen unsichtbaren Rahmen legen und Klicks abfangen. Wenn ein Dienst eine Einbettung anbietet, stellt er dafür eine eigene Adresse bereit.

Ein iframe absichern

<iframe
  src="https://anbieter.example/formular"
  title="Newsletter-Anmeldung"
  sandbox="allow-scripts allow-forms allow-same-origin"
  referrerpolicy="no-referrer-when-downgrade"
  loading="lazy"></iframe>

sandbox schränkt ein, was die fremde Seite darf — und erlaubt dann gezielt nur das Nötige. Ohne die Angabe darf sie alles, was ihre eigene Seite auch dürfte.

Vorsicht: sandbox ohne passende allow-Angaben legt viele Einbettungen still — Formulare können dann nicht absenden. Wenn der Anbieter fertigen Code liefert, nimm ihn, wie er ist. Setze sandbox nur, wenn du weißt, was die Einbettung braucht.

Datenschutz — der Punkt, der oft vergessen wird

Ein <iframe> lädt beim Aufruf deiner Seite eine fremde Seite. Dabei geht die IP-Adresse deiner Besucher an diesen Anbieter, meist zusammen mit der Information, welche deiner Seiten sie besucht haben. Bei Kartendiensten, Kalendern und Formularen ist das der Regelfall.

Drei praktische Konsequenzen:

Die eingebetteten Dienste gehören in deine Datenschutzerklärung.
Für manche Einbettungen ist eine Einwilligung vor dem Laden erforderlich — also die Zwei-Klick-Lösung: erst ein Vorschaubild, das Laden erst nach Klick.
Prüfe, ob der Anbieter eine datenschutzfreundliche Variante hat, so wie YouTube mit youtube-nocookie.com.

Das ist kein Rechtsrat — nur der Hinweis, dass hier eine Entscheidung zu treffen ist, bevor die Seite online geht. Wer die Rechtstexte macht, sollte wissen, was eingebettet ist.

Wie du die Einbettung später änderst

Der häufigste Fall im Alltag: Der Kalender-Link ändert sich, das Newsletter-Formular zieht zu einem anderen Anbieter, die Adresse in der Karte stimmt nicht mehr.

Im Code

iframe im HTML finden, neue Einbettungs-Adresse beim Anbieter holen, src ersetzen, Höhe nachjustieren, auf dem Handy prüfen, hochladen.

Per Klick

PageFix tauscht eingebettete Videos per Klick aus — du klickst das Video an und trägst die neue Adresse ein. Bei Kalendern und Formularen ist das ehrlich gesagt Code-Arbeit: Diese Einbettungen lassen sich im Editor nicht anklicken.

PageFix ist ein deutschsprachiger Web-Editor für KI-gebaute HTML-Seiten — für Texte, Schriften, Farben, Bilder, Links und Videos. Einmalzahlung von 49 €, kein Abo.

Häufige Fragen

Was ist ein iframe in HTML?

Ein Fenster in deiner Seite, in dem eine fremde Seite angezeigt wird — typischerweise ein Termin-Kalender, ein Newsletter-Formular, eine Karte oder ein Video. Du brauchst dafür die Einbettungs-Adresse des Anbieters, die du dort unter „Einbetten" oder „Embed" findest.

Warum bleibt mein iframe leer?

Zwei häufige Ursachen. Erstens: Der Betreiber verbietet die Einbettung seiner Seite technisch über X-Frame-Options oder eine Content-Security-Policy — das machen Google, Facebook, Banken und die meisten Shops, und du kannst es nicht umgehen. Zweitens: Es fehlt die Einbettungs-Adresse, denn die normale Seitenadresse funktioniert bei vielen Diensten nicht.

Wie mache ich ein iframe responsiv?

Bei Videos und Karten mit width: 100% und aspect-ratio: 16 / 9, weil sie ein festes Seitenverhältnis haben. Bei Kalendern und Formularen mit width: 100% und einer festen Höhe in Pixeln, weil sie kein festes Verhältnis haben. Setze die Höhe eher zu groß, sonst wird der Absenden-Knopf abgeschnitten.

Warum ist mein eingebettetes Formular abgeschnitten?

Die Höhe des iframe ist zu knapp gesetzt. Dann erscheint im Rahmen ein eigener Scrollbalken und der Absenden-Knopf liegt darunter. Besucher merken das oft nicht und brechen ab. Prüfe die Einbettung auf dem Handy und erhöhe die Höhe.

Muss ich eingebettete Inhalte in der Datenschutzerklärung nennen?

Ein iframe lädt beim Aufruf deiner Seite eine fremde Seite, und dabei geht die IP-Adresse deiner Besucher an diesen Anbieter. Die eingebetteten Dienste gehören deshalb in die Datenschutzerklärung, und für manche ist eine Einwilligung vor dem Laden erforderlich. Das ist kein Rechtsrat — sprich es mit der Person durch, die deine Rechtstexte macht.

Kann ich eine Einbettung ohne Code austauschen?

Bei Videos ja: In PageFix klickst du das Video an und trägst die neue Adresse ein. Bei Kalendern und Formularen nicht — diese Einbettungen lassen sich im Editor nicht anklicken, dort ist es Code-Arbeit.

Jetzt starten

Erst ausprobieren? Öffne die Demo — der echte Editor, ohne Konto.

Zuletzt aktualisiert: 12. September 2026

← Zurück zur Startseite und PageFix ansehen