So betten Sie iFrame-Code einfach in WordPress ein (3 Methoden)

Beim Erstellen von Websites stoßen wir oft auf die Notwendigkeit, Inhalte von externen Quellen anzuzeigen, ohne sie selbst zu hosten. Hier glänzen iFrames.

Ob Sie ein Video, eine Karte oder eine Drittanbieteranwendung einbetten, iFrames bieten eine nahtlose Möglichkeit, externe Inhalte in Ihre WordPress-Site zu integrieren.

In diesem Artikel führen wir Sie durch drei einfache Methoden, um iFrame-Code in WordPress-Beiträge oder -Seiten einzufügen. Von der Verwendung vorgefertigter Einbettungscodes bis zur manuellen Erstellung Ihrer eigenen iFrames ist alles abgedeckt. 

Was ist iFrame?

Ein iFrame (kurz für Inlineframe) ermöglicht es Ihnen, Videos oder andere Inhalte auf Ihrer Website einzubetten, ohne diese Videos tatsächlich hosten zu müssen. Dies kann Bandbreite und Speicherplatz sparen, weshalb Sie niemals ein Video direkt in WordPress hochladen sollten.

Zusätzlich zur Verbesserung der Geschwindigkeit und Leistung Ihres WordPress wird der iFrame automatisch aktualisiert, wenn sich der ursprüngliche Inhalt ändert. Das bedeutet, dass Besucher immer die neueste Version des Inhalts sehen.

Das Einbetten von urheberrechtlich geschütztem Material über einen iFrame verstößt ebenfalls nicht gegen das Urheberrecht, sodass es Sie vor Klagen schützen kann.

Nichtsdestotrotz sehen wir uns an, wie Sie ganz einfach iFrame-Code in WordPress einbetten können. Verwenden Sie einfach die Schnelllinks, um direkt zu der Methode zu springen, die Sie verwenden möchten:

Methode 1: WordPress iFrame mit dem Quellcode einbetten (Schnell und einfach)

Viele große Video-Hosting-Seiten bieten eine „Einbetten“-Option, die Ihnen Zugriff auf den iFrame-Code gibt, den Sie zu Ihrer Website hinzufügen müssen.

Wenn die Website über Einstellungen für 'Teilen' oder 'Einbetten' verfügt, ist dies oft der schnellste und einfachste Weg, Inhalte einzubetten.

Die genauen Schritte variieren je nach Plattform, aber schauen wir uns YouTube als Beispiel an. Um YouTube-Videos in WordPress einzubetten, klicken Sie einfach auf die Schaltfläche „Teilen“ unter dem Video, das Sie verwenden möchten.

Danach sehen Sie ein Popup mit verschiedenen Freigabeoptionen.

Klicken Sie einfach auf die Schaltfläche „Einbetten“.

YouTube zeigt Ihnen nun den iFrame-Code an.

Standardmäßig wählt YouTube die Option „Player-Steuerelemente anzeigen“ aus, wir empfehlen jedoch auch, den Modus mit verbesserter Privatsphäre zu aktivieren. Dieser Modus ermöglicht es Besuchern, die eingebetteten Inhalte auf Ihrer WordPress-Website anzusehen, ohne dass dies ihre Browsererfahrung auf YouTube beeinflusst.

Klicken Sie danach auf die Schaltfläche „Kopieren“.

Nun können Sie diesen Code in jeden Beitrag oder jede Seite auf Ihrer Website einfügen. In dieser Anleitung fügen wir ihn zu einer neuen Seite im WordPress Block-Editor hinzu.

Öffnen Sie einfach die Seite und klicken Sie dann auf die Schaltfläche „+“. Geben Sie im erscheinenden Popup „HTML“ ein, um den benutzerdefinierten HTML-Block zu finden.

Wenn der richtige Block erscheint, klicken Sie darauf, um ihn zu Ihrer Seite hinzuzufügen.

Fügen Sie dann einfach den YouTube iFrame-Code in den Block ein.

Sie können Ihre Seite jetzt veröffentlichen, um das YouTube-Video live auf Ihrem WordPress-Blog zu sehen.

Methode 2: Einbetten mit einem WordPress iFrame-Plugin (funktioniert mit allen Websites)

Nicht jede Drittanbieter-Website bietet einen fertigen Einbettungscode an. Wenn Sie keine „Teilen“- oder „Einbetten“-Einstellungen finden, können Sie Ihren eigenen iFrame-Code ganz einfach mit dem iFrame-Plugin erstellen.

Zuerst müssen Sie das iFrame-Plugin installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins.

Nach der Aktivierung beginnt das Plugin sofort zu funktionieren, ohne dass eine Einrichtung erforderlich ist. Gehen Sie einfach zu der Seite oder dem Beitrag, auf dem Sie Inhalte einbetten möchten, und fügen Sie einen Shortcode-Block hinzu.

Fügen Sie danach den folgenden Shortcode hinzu:

[iframe src="URL goes here"]

Ersetzen Sie einfach 'URL hier einfügen' durch die URL des Inhalts, den Sie auf Ihrer Website einbetten möchten.

Als Beispiel wollen wir eine Google Map in WordPress einfügen, da dies eine einfache Möglichkeit für Geschäfte, Restaurants und andere Orte ist, Anfahrtsbeschreibungen auf ihrem Kontaktformular hinzuzufügen.

Danach können Sie den Beitrag einfach in der Vorschau anzeigen oder veröffentlichen.

Sie sollten nun den eingebetteten Inhalt auf Ihrer Website sehen.

Um alle verfügbaren Parameter anzuzeigen, können Sie sich die iFrame-Plugin-Seite ansehen.

Methode 3: iFrames manuell in WordPress einbetten (kein Plugin erforderlich)

Wenn Sie kein spezielles WordPress-Plugin verwenden möchten, können Sie den iFrame-Code manuell erstellen. Dazu müssen Sie die Seite oder den Beitrag öffnen und dann einen HTML-Block im WordPress-Content-Editor hinzufügen.

Fügen Sie zuerst den folgenden Code in Ihren HTML-Block ein:

<iframe src="URL goes here"></iframe>

Ersetzen Sie einfach „URL hier einfügen“ durch die direkte URL des Inhalts, den Sie einbetten möchten.

Hier betten wir eine Google Map ein:

Sie können zusätzliche Parameter hinzufügen, um zu ändern, wie der Inhalt auf Ihrer Website aussieht. Zum Beispiel setzen wir die Breite auf 600 Pixel und die Höhe auf 200 Pixel:

<iframe src="URL goes here" width="600" height="300"></iframe>

Dies ist nützlich, wenn Sie die eingebetteten Inhalte auf kleinerem Raum anzeigen müssen. Zum Beispiel möchten Sie möglicherweise die Größe des Inhalts nach dem Testen der mobilen Version Ihrer WordPress-Website ändern.

Was sind iFrame-Alternativen?

Es gibt einige Nachteile beim Einbetten von iFrames.

Nicht alle Websites erlauben es Ihnen, ihre Inhalte in einen iFrame einzufügen, und Sie müssen die Inhalte möglicherweise manuell anpassen, damit sie im verfügbaren Platz gut aussehen.

Ein weiteres Problem ist, dass HTTPS-Websites iFrames nur für Inhalte von anderen HTTPS-Websites verwenden können. Ebenso können HTTP-Websites iFrames nur für Inhalte von anderen HTTP-Websites verwenden.

Deshalb bevorzugen viele Plattformen wie WordPress oEmbed.

Häufig können Sie oEmbed verwenden, um Videos und andere Inhalte einzubetten, indem Sie einfach eine URL in den WordPress-Beitrag einfügen. WordPress passt die Größe von oEmbed automatisch an, um in den verfügbaren Platz zu passen, sodass es auf Desktops, Smartphones und Tablets immer perfekt aussieht.

Wenn Sie Social-Feeds auf Ihrer Website anzeigen möchten, empfehlen wir die Verwendung eines Social-Media-Plugins anstelle von iFrames.

Zum Beispiel macht es Smash Balloon einfach, Inhalte von Facebook, Instagram, Twitter und YouTube einzubetten.

Hier sind einige Tutorials zum Hinzufügen von Social-Media-Feeds mit Smash Balloon:

• Tatsächliche Tweets in WordPress-Blogbeiträge einbetten
• So betten Sie TikTok-Videos in WordPress ein
• So betten Sie eine YouTube-Playlist in WordPress ein (beste Methode)

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie iFrames einfach in WordPress hinzufügen können. Möglicherweise möchten Sie auch unsere Anleitungen zum Einbetten von SoundCloud in WordPress und zum Deaktivieren von Embeds in WordPress lesen.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.