iFrame in WordPress einbinden – manuell / ohne Plugin einbetten

Was ist ein iFrame und warum wird er verwendet?

iFrames, auch Inline Frames genannt, sind HTML-Elemente, mit denen sich Inhalte von einer externen Quelle auf einer Webseite anzeigen lassen. Das kann zum Beispiel ein YouTube-Video, eine Google Maps-Karte, ein Kontaktformular oder sogar komplette Webseiten sein. Besonders praktisch: Inhalte über einen iFrame müssen nicht auf dem eigenen Server gehostet werden, sondern werden direkt aus einer externen URL geladen.

Die Verwendung von iFrames bietet sich an, wenn du fremde Inhalte auf deiner WordPress-Website darstellen willst, ohne diese selbst hochladen oder pflegen zu müssen. Auch Dienste wie SoundCloud, SlideShare oder Facebook-Postswerden oft per iFrame eingebaut.

Typische Anwendungsfälle für iFrames (z. B. Videos, Karten, Formulare)

Ein iFrame in WordPress eignet sich ideal, um unterschiedliche Inhalte externer Anbieter darzustellen, die sich nicht direkt ins CMS integrieren lassen. Besonders häufig wird diese Technik genutzt für:

• YouTube-Videos: Einfach den Einbettungscode einbinden und das Video wird direkt auf deiner WordPress-Seite angezeigt.
• Google Maps-Karten: Um Standorte oder Anfahrtspläne interaktiv einzubinden.
• Kontaktformulare: Externe Formulardienste wie Typeform oder Jotform lassen sich einfach über inline frames integrieren.
• SoundCloud-Player: Um Musik direkt auf deiner Website einzubauen.
• Slideshare-Präsentationen: Perfekt für das Teilen von Fachvorträgen oder Infomaterial.
• Komplette Webseiten: Wenn du Inhalte von Partnern oder Subdomains übernehmen willst, ohne sie zu kopieren.

Dank der flexiblen Einbettung über inline frames kannst du mit wenig Aufwand multimediale Inhalte auf deiner Website anzeigen, ohne zusätzlichen Speicherplatz zu beanspruchen oder dich um Updates der eingebauten Inhalte zu kümmern.

iFrames in WordPress einbinden – Diese 3 Methoden gibt es

Methode 1: iFrame in WordPress manuell per HTML Code einfügen

Die einfachste Möglichkeit, einen iFrame in WordPress zu integrieren, ist das händische Eingesetzte via HTML-Code. Dabei kommt es darauf an, welchen Editor du nutzt: den klassischen, den Gutenberg-Editor oder einen Page-Builder wie Elementor.

Im Gutenberg-Editor:

• Füge einen neuen Block hinzu und wähle den Blocktyp „Benutzerdefinierter HTML-Block“.
• Füge dort deinen inline frame Code ein.
• Mit der Vorschau-Funktion kannst du den Inhalt direkt kontrollieren.

Im Classic Editor:

• Wechsle oben rechts in den „Text“-Modus (nicht den visuellen Modus).
• Füge den iFrame-HTML-Code an der gewünschten Stelle deiner Seite oder deines Beitrags ein.

Mit Elementor (Page Builder Plugin):

• Ziehe das Widget „HTML“ an die gewünschte Position im Layout.
• Füge in das Feld deinen iframe-Code ein, und der Inhalt wird automatisch geladen.

Ein Beispiel für einen einfachen iFrame:

<iframe src="https://www.beispielseite.de" width="600" height="400" frameborder="0" allowfullscreen></iframe>

Hier kannst du Parameter wie width (Breite) und height (Höhe) in Pixel angeben, um Inhalt an deine Website anzupassen. Auch andere HTML-Tags wie frameborder oder allowfullscreen lassen sich je nach Bedarf ergänzen.

Diese Methode eignet sich vor allem dann, wenn du ohne Plugin arbeiten und selbst die Kontrolle über den Codebehalten willst. Händisch eingefügte inline frames sind schnell umgesetzt und verursachen keinen zusätzlichen Programmieraufwand.

Methode 2: Einbettungscodes von Drittanbietern verwenden

Viele Plattformen wie YouTube, Vimeo oder Google Maps bieten direkt einen Einbettungscode an. Diesen findest du meist unter dem „Teilen“-Button als HTML-Snippet oder iframe-code.

Beispiel für ein eingesetztes YouTube-Video:

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

Diesen Embed-Code kannst du ebenfalls in den benutzerdefinierten HTML-Block im Inhaltsbereich deiner Seite einfügen. Vorteil: Du musst keinen eigenen Code schreiben, sondern kannst den fertig generierten nutzen. Achte dabei auf das https-Protokoll (Hypertext Transfer Protocol Secure), da WordPress standardmäßig ebenfalls https verwendet.

Methode 3: iFrame per Plugin (Shortcode) in WordPress einbetten

Wenn du regelmäßig inline frames in deiner WordPress Website einbinden möchtest, kann ein spezielles iframe-Plugin sinnvoll sein. Plugins erleichtern die Einbettung und erlauben oft die Nutzung eines Shortcode.

Ein Beispiel:

[iframe src=“https://www.externeseite.de“ width=“100%“ height=“500″]

Diese Shortcodes lassen sich wie normale Inhalte im Texteditor einfügen. Vorteil: Du musst keinen HTML-Codeschreiben und kannst bestimmte Parameter wie Breite und Höhe direkt im Shortcode anpassen.

So findest du das passende iFrame-Plugin (Vergleich & Empfehlungen)

Übersicht beliebter iFrame-Plugins

Auf wordpress.org deutsch gibt es zahlreiche Plugins zur iFrame-Einbindung. Beliebt sind:

• Advanced iFrame
• Iframe
• Shortcoder (wir selbst nutzen oftmals Shortcoder)

Diese Tools bieten verschiedene Zusatzfunktionen, wie z. B. das Einbinden von inline frames mit Scrollbars, das Setzen von Standard-Height-Parametern oder das Einbinden in Widgets.

Vorteile & Nachteile der Plugin-Nutzung

Vorteile:

• Kein manuelles Coden nötig
• Oft mehr Design-Optionen
• Zusätzliche Funktionen wie automatische Anpassung der Höhe

Nachteile:

• Zusätzliche Abhängigkeit vom Plugin
• Updates notwendig
• Teilweise Performance-Einbußen

Sicherheitsaspekte: Sind iFrames in WordPress gefährlich?

Mögliche Risiken und wie du sie vermeidest

Obwohl iFrames eine bequeme Möglichkeit darstellen, Inhalte externer Seiten auf deiner WordPress-Seite einzubinden, bringen sie auch einige sicherheitsrelevante Herausforderungen mit sich. Hacker könnten beispielsweise versuchen, schädliche Skripte oder manipulierte Inhalte über iFrames einzuschleusen, insbesondere wenn die eingesetzte Seite kompromittiert ist.

Ein weiteres Risiko liegt in sogenannten „Clickjacking“-Attacken. Dabei wird deine Website in einem unsichtbaren iFrame dargestellt, um Nutzer dazu zu bringen, unbeabsichtigt auf bestimmte Buttons zu klicken.

Zusätzlich kann das Einbinden von Inhalten über eine unsichere Verbindung (http statt https) dazu führen, dass Browser Warnmeldungen anzeigen oder Inhalte blockieren. Das kann das Nutzererlebnis erheblich beeinträchtigen.

So vermeidest du diese Risiken:

• Binde nur Inhalte von vertrauenswürdigen und sicheren (https) Quellen ein.
• Nutze das Attribut sandbox, um die Rechte eingesetzter Inhalte einzuschränken.
• Verwende referrerpolicy=“no-referrer“ oder loading=“lazy“, um Datenschutz und Performance zu verbessern.
• Prüfe regelmäßig die Funktionsweise und Sicherheit der eingebundenen Seiten.
• Nutze gegebenenfalls ein Sicherheits-Plugin wie Wordfence zur Überwachung deiner Seite.

iFrames können ein Sicherheitsrisiko darstellen, wenn sie Inhalte von unsicheren Quellen laden. Auch können schädliche Skripte über iFrames in deine Seite gelangen. Achte darauf, dass die Quell-URL vertrauenswürdig ist und https verwendet wird.

Vermeide es, inhalte von anderen https-sites in eine Seite mit http einzusetzen – dies kann zu Problemen mit der Darstellung führen.

Tipps zur sicheren Einbindung

Vorteile:

• Kein manuelles Coden nötig
• Oft mehr Design-Optionen
• Zusätzliche Funktionen wie automatische Anpassung der Höhe

Nachteile:

• Zusätzliche Abhängigkeit vom Plugin
• Updates notwendig
• Teilweise Performance-Einbußen

Alternativen zum iFrame – Wenn du lieber ohne arbeitest

Embed, API-Integration & Plugins mit nativer Einbindung

Wenn du auf iFrames verzichten willst, bietet WordPress einige Alternativen:

• oEmbed: Einfach eine URL (z. B. YouTube oder Twitter) in die Bearbeitungsmaske einfügen, WordPress erzeugt automatisch den eingesetzten Inhalt
• API-Integration: Etwas technischer, aber leistungsstark
• Spezielle WordPress-Plugins zur Einbindung von Medien und externen Inhalten

Diese Methoden erfordern weniger Pflege und sind in der Regel sicherer.

Fazit: Wann lohnen sich iFrames wirklich?

Die Verwendung von iFrames ist eine praktische Lösung, um externe Inhalte wie Videos, Karten oder Formulare schnell auf deiner WordPress-Website anzuzeigen. Besonders wenn du Inhalte von einer externen Website einbinden möchten, ohne sie selbst zu hosten, ist der iFrame ein zeitsparendes Werkzeug.

Die 3 Methoden – manuell, über Embed-Code oder per iframe – WordPress-Plugin – bieten dir je nach Anwendungsfall die passende Lösung. Wer flexibel bleiben und technischen Code vermeiden möchte, ist mit einem WordPress-Plugin gut beraten. Für einfache Anwendungsfälle reicht oft schon ein HTML-Snippet oder ein Shortcode.

Egal für welche Variante du dich entscheidest: Mit dem richtigen Know-how kannst du inline frames in WordPress einbauen, ohne Kompromisse bei Sicherheit oder Design einzugehen. Und so ganz nebenbei wertest du deinen Content mit eingebetteten Inhalten gezielt auf.