iFrame in WordPress einbinden: 3 Methoden – manuell, per Plugin und mit Shortcode

Du willst ein YouTube-Video einbetten. Oder eine Google Maps Karte. Oder ein Formular von einer externen Seite. Und dafür brauchst du einen iFrame.

Problem: WordPress blockt iFrame-Code im Editor. Einfach reinkopieren und hoffen? Funktioniert meistens nicht. Das CMS filtert bestimmte HTML-Tags aus Sicherheitsgründen raus. Und iFrames gehören dazu.

Aber es gibt Wege. Drei, um genau zu sein. Du kannst iFrames in WordPress manuell einbinden, ein Plugin nutzen oder mit Shortcodes arbeiten. Jede Methode hat ihre Berechtigung. In diesem Artikel zeigen wir dir alle drei – Schritt für Schritt. Egal ob du fremde Inhalte einbetten willst, Inhalte von anderen HTTPS-Sites anzeigen oder einfach ein YouTube-Video auf deiner WordPress-Seite einbetten möchtest. Nach diesem Artikel weißt du, wie’s geht.

 

Was ist ein iFrame – und wofür brauchst du ihn?

Ein iFrame ist ein HTML-Element. Kurz für „Inline Frame“. Er erlaubt dir, den Content einer externen Seite innerhalb deiner eigenen Website anzeigen zu lassen. Wie ein Fenster in eine andere Seite hinein.

Typische Anwendungsfälle: YouTube-Videos einbetten. Google Maps Karten einfügen. SoundCloud-Player anzeigen. SlideShare-Präsentationen. Facebook-Posts. Formulare von Drittanbietern. Überall dort, wo du Inhalte auf deiner Website zeigen willst, die woanders gehostet werden, kommen iFrames ins Spiel.

Die Verwendung von iFrames ist weit verbreitet. Der Vorteil: Du musst die Inhalte nicht selbst hosten. Du bettest sie ein. Der Content bleibt auf dem Original-Server, wird aber auf deiner Seite angezeigt. Kein Programmieraufwand. Kein Kopieren von Dateien. Einfach den Einbettungscode nehmen und einfügen. Zumindest in der Theorie. In WordPress ist das mit einem Extra-Schritt verbunden.

 

Warum filtert WordPress iFrames standardmäßig raus?

Sicherheit. Wie so oft.

WordPress filtert bestimmte HTML-Tags – darunter iFrames – weil sie ein Sicherheitsrisiko darstellen können. Ein iFrame kann theoretisch beliebigen Code von einer beliebigen URL laden. Wenn jemand mit Autoren- oder Redakteurs-Rechten einen schädlichen iFrame einbaut, könnte das deine gesamte WordPress-Website kompromittieren. Clickjacking, Phishing, Malware – alles möglich.

Deshalb entfernt WordPress iFrame-Code aus dem visuellen Editor. Wenn du einen iFrame in den Texteditor einfügst und dann zum visuellen Editor wechselst, ist er weg. Einfach gelöscht. Ohne Warnung. Das ist kein Bug – das ist Absicht.

Für Administratoren ist das Risiko gering. Du weißt, was du tust. Aber WordPress geht auf Nummer sicher. Die Lösung: Du musst dem System sagen, dass iFrames erlaubt sind. Wie? Dafür gibt’s die folgenden 3 Methoden.

 

Methode 1: iFrame Code manuell über den HTML-Block einbetten

Der direkteste Weg. Kein Plugin. Kein Shortcode. Nur du und ein HTML-Block.

Im Gutenberg-Editor: Füge einen neuen Block hinzu. Suche nach „Benutzerdefiniertes HTML“ (oder „Custom HTML“). In diesen benutzerdefinierten HTML-Block kopierst du deinen iFrame-Code direkt rein. Zum Beispiel:

<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" width="560" height="315" frameborder="0" allowfullscreen></iframe>

Speichern. Vorschau anzeigen. Der eingebetteten Inhalt sollte auf deiner Seite erscheinen. Der Trick ist der HTML-Block – denn dort filtert WordPress die HTML-Tags nicht raus. Im normalen Absatz-Block würde der Code verschwinden.

Für den Classic Editor funktioniert’s ähnlich: Wechsle in den „Text“-Modus (nicht „Visuell“). Dort fügst du den iFrame-Code ein. Wichtig: Nicht zurück zum visuellen Editor wechseln. Sonst ist der Code weg. Manuell einbinden ist die schnellste Methode – perfekt, wenn du weißt, was du tust und den Einbettungscode bereits hast.

 

Methode 2: iFrame per Plugin in WordPress einbinden

Wenn du regelmäßig iFrames nutzt oder es lieber komfortabel magst, nimm ein Plugin.

Das Plugin iframe – WordPress-Plugin (verfügbar auf WordPress.org deutsch) ist die bekannteste Lösung. Es ermöglicht dir, iFrames per Shortcode einzubetten. Nach der Installation nutzt du einfach:

[iframe src="https://example.com" width="100%" height="500"]

Das Plugin wandelt den Shortcode in einen sauberen iFrame-Code um. Du kannst Parameter wie Breite und Höhe direkt im Shortcode steuern. Flexibel, einfach, ohne dass du HTML anfassen musst. Sobald du das iframe-Plugin installiert hast, funktionieren Shortcodes überall – in Beiträgen, Seiten und sogar in Widgets.

Auch andere WordPress-Plugins bieten iFrame-Unterstützung. Manche Page-Builder haben eigene iFrame-Module. Elementor zum Beispiel hat ein HTML-Widget, in das du Einbettungscodes direkt einfügen kannst. Welches Plugin du nimmst, hängt davon ab, wie oft du iFrames brauchst und wie viel Kontrolle du über die Parameter willst. Für den gelegentlichen Einsatz reicht das iframe-Plugin. Für Power-User: Page-Builder.

 

Methode 3: WordPress Embed Funktion für bekannte Dienste

Hier kommt die Überraschung: Für viele Dienste brauchst du gar keinen iFrame.

WordPress hat eine eingebaute Embed-Funktion. Du kopierst einfach die URL eines YouTube-Videos, SoundCloud-Tracks oder Twitter-Posts in einen Absatz-Block – und WordPress wandelt sie automatisch in einen eingebetteten Inhalt um. Kein iFrame-Code nötig. Kein Plugin. Einfach die URL einfügen. WordPress erkennt den Dienst und erstellt den Embed automatisch.

Das funktioniert für eine lange Liste von Diensten: YouTube, Vimeo, SoundCloud, SlideShare, Twitter, Instagram, Spotify und viele mehr. WordPress nutzt dafür das oEmbed-Protokoll. Der Vorteil: Sauberer Code, responsive Darstellung, kein Sicherheitsrisiko. Der Nachteil: Nur für unterstützte Dienste. Wenn du Inhalte von einer externen Seite einbetten willst, die nicht in der Embed-Liste steht, brauchst du weiterhin einen manuellen iFrame oder ein Plugin.

Tipp: Bevor du einen iFrame baust, probier erstmal die URL direkt in den Editor zu kopieren. Wenn WordPress sie erkennt, sparst du dir den Aufwand. Embed ist die eleganteste Lösung – wenn sie funktioniert.

 

Welche Parameter kannst du bei einem iFrame in WordPress anpassen?

Ein iFrame ist mehr als nur eine URL. Du kannst über verschiedene Parameter steuern, wie der eingebettete Inhalt dargestellt wird.

src – die Quell-URL. Woher der Content kommt. Pflichtfeld. Ohne src kein iFrame. width und height – Breite und Höhe in Pixel oder Prozent. width="100%" macht den iFrame responsiv. height="500" setzt eine feste Höhe von 500 Pixel. frameborder – Rahmen um den iFrame. Meistens auf 0 setzen. allowfullscreen – erlaubt Vollbild-Modus, wichtig für Videos.

Es gibt weitere Parameter: loading="lazy" sorgt für verzögertes Laden – gut für Performance. sandbox schränkt ein, was der iFrame darf – wichtig für Sicherheit. title gibt dem iFrame einen barrierefreien Titel. Durchstöbere den Code deines Einbettungscodes und schau, welche Parameter bereits gesetzt sind. Meistens musst du nur width und height anpassen, den Rest liefert der Anbieter.

Der iFrame-Code, den Dienste wie YouTube oder Google Maps dir geben, enthält bereits sinnvolle Parameter. Du musst normalerweise nur die Breite anpassen, damit alles zu deinem Layout passt. 100% Breite ist fast immer die beste Wahl.

 

Wie machst du iFrames responsiv?

Ein iFrame mit fester Pixelbreite sieht auf dem Desktop gut aus. Auf dem Handy? Katastrophe. Er ragt über den Bildschirmrand hinaus oder wird abgeschnitten.

Die einfachste Lösung: Breite auf 100% setzen und den iFrame in einen Container packen. Per CSS:

<div style="position:relative; padding-bottom:56.25%; height:0; overflow:hidden;">
  <iframe src="https://www.youtube.com/embed/VIDEOID" 
    style="position:absolute; top:0; left:0; width:100%; height:100%;" 
    frameborder="0" allowfullscreen></iframe>
</div>

Das HTML-Snippet mit dem padding-bottom-Trick hält das Seitenverhältnis (16:9 bei 56.25%). Der iFrame füllt den Container und skaliert mit. Responsive, sauber, auf jedem Gerät.

Viele Plugins und auch die WordPress Embed-Funktion machen das automatisch. Wenn du iFrames manuell einfügst, musst du selbst dafür sorgen. Aber der CSS-Trick ist simpel und funktioniert überall. Kopieren, anpassen, fertig.

Tipp: Mehr zum richtigen Einbinden und Optimieren von Bildern findest du in unserem Ratgeber „Bilder in WordPress einfügen“.

 

Welche Sicherheitsaspekte solltest du bei iFrames beachten?

iFrames laden externe Inhalte. Das heißt: Du gibst einem fremden Server Platz auf deiner WordPress-Seite. Wenn dieser Server kompromittiert wird, wird auch dein eingebetteter Inhalt kompromittiert. Darüber solltest du dir bewusst sein.

Wichtigste Regel: Nur Inhalte von vertrauenswürdigen Quellen einbetten. YouTube, Google Maps, Vimeo – kein Problem. Eine obskure Seite, die du nicht kennst? Vorsicht. Prüfe, ob die Quell-URL HTTPS verwendet. Wenn deine Seite HTTPS nutzt und der iFrame HTTP lädt, bekommst du Mixed-Content-Warnungen. Nur Inhalte von HTTPS-Sites einbinden.

Das Hypertext Transfer Protocol Secure (HTTPS) ist Pflicht – auf beiden Seiten. Und wenn du einbinden möchten, was andere auf deiner Website anpassen können (z.B. in Formularen), nutze den sandbox-Parameter im iFrame. Der schränkt ein, was der eingebettete Content darf. Kein JavaScript ausführen, keine Formulare absenden, keine Popups öffnen. Mehr Kontrolle, weniger Risiko.

 

Wann solltest du einen iFrame nutzen – und wann besser nicht?

iFrames sind praktisch. Aber nicht immer die beste Lösung.

Nutze iFrames für: Videos von YouTube oder Vimeo. Karten von Google Maps. Formulare von Typeform oder Google Forms. SoundCloud-Player. SlideShare-Präsentationen. Externe Tools, die du nicht selbst hosten willst oder kannst. Überall dort, wo du fremde Inhalte zeigen willst, ohne sie auf deinem Server zu speichern.

Nutze keine iFrames für: Inhalte, die du selbst erstellen kannst. Wenn du einen Textblock von einer anderen Seite einbetten willst – kopier den Text und schreib ihn um. Wenn du ein Bild brauchst – lade es in deine Mediathek. iFrames erzeugen HTTP-Requests, laden externen Code und können die Performance deiner WordPress-Website beeinflussen. Je weniger iFrames, desto schneller die Seite.

Auch für SEO sind iFrames neutral bis negativ. Suchmaschinen indexieren den Inhalt eines iFrames nicht als deinen Content. Was in einem iFrame steht, gehört der Quellseite. Für dein Ranking zählt es nicht. Also: iFrames gezielt einsetzen, wo sie Sinn machen. Nicht überall.

Tipp: Für schnellere Ladezeiten lohnt sich WordPress Lazy Loading – hier erfährst du, wie du es richtig einsetzt.

 

Häufige Probleme mit iFrames in WordPress – und die Lösungen

Problem eins: iFrame-Code verschwindet nach dem Speichern. Lösung: Benutzerdefinierten HTML-Block verwenden, nicht den Absatz-Block. Oder in den Code-Editor wechseln. Im visuellen Editor filtert WordPress bestimmte HTML-Tags raus.

Problem zwei: iFrame zeigt nichts an – nur ein leeres Feld. Meistens ein Mixed-Content-Problem. Deine Seite läuft auf HTTPS, der iFrame lädt HTTP. Browser blockieren das. Lösung: Sicherstellen, dass die Quell-URL auf HTTPS zeigt. https:// durch https:// ersetzen. Wenn die Quellseite kein HTTPS unterstützt, hast du ein Problem – dann geht’s leider nicht.

Problem drei: iFrame ist nicht responsiv. Auf dem Handy abgeschnitten oder zu klein. Lösung: Den CSS-Container-Trick von oben verwenden. Oder width="100%" setzen. Manche Themes haben eigene CSS-Regeln, die iFrames beschneiden – in dem Fall musst du per Custom CSS nachhelfen. Aber mit dem richtigen Code ist Responsivität kein Hexenwerk. Einen iFrame auf deiner WordPress-Seite hinzufügen ist einfach – ihn gut aussehen lassen manchmal etwas weniger.

 

 

Das Wichtigste auf einen Blick

• Ein iFrame bettet externe Inhalte in deine WordPress-Seite ein – wie ein Fenster zu einer anderen Website.
• WordPress filtert iFrame-Code aus Sicherheitsgründen – du musst einen der drei Wege nutzen.
• Manuell: Benutzerdefinierten HTML-Block im Gutenberg-Editor verwenden und iFrame-Code einfügen.
• Per Plugin: Das iframe-Plugin erlaubt Einbettung per Shortcode – komfortabel und flexibel.
• WordPress Embed: Für YouTube, Vimeo, SoundCloud & Co. reicht oft die URL direkt im Editor.
• Responsiv machen: width="100%" setzen oder den CSS-Container-Trick mit padding-bottom nutzen.
• Nur Inhalte von vertrauenswürdigen HTTPS-Quellen einbetten – Mixed Content vermeiden.
• iFrames sind SEO-neutral – der eingebettete Inhalt zählt nicht als dein Content.
• Parameter wie width, height, sandbox und loading="lazy" geben dir Kontrolle über Darstellung und Sicherheit.
• iFrames gezielt einsetzen – weniger ist mehr für Performance und Ladezeit.