Wie man iFrame-Code einfach in WordPress einbettet (3 Methoden)

Möchten Sie einen iFrame-Code in einen WordPress-Beitrag oder eine Seite einbetten?

IFrames bieten eine einfache Möglichkeit, Videos oder andere Inhalte auf Ihrer Website einzubetten, ohne sie hochzuladen. Viele Plattformen von Drittanbietern, wie z. B. YouTube, ermöglichen es Benutzern, iframe zu verwenden, um Inhalte von ihrer Website einzubetten.

In diesem Artikel zeigen wir Ihnen, wie Sie iFrame-Code mit mehreren Methoden einfach in WordPress einbetten können.

Was ist ein iFrame?

Mit einem iFrame können Sie Videos oder andere Inhalte auf Ihrer Website einbetten. Das bedeutet, dass Sie ein Video auf Ihrer Website anzeigen können, ohne dieses Video tatsächlich zu hosten.

Der iframe ist wie das Öffnen eines Fensters auf Ihrer Website, um externe Inhalte anzuzeigen. Der eigentliche Inhalt wird immer noch von der Quelle geladen, von der Sie einbetten.

Um einen Iframe hinzuzufügen, müssen Sie einen speziellen HTML-Code einfügen. Machen Sie sich keine Sorgen, wenn das ziemlich technisch klingt.

Wir zeigen Ihnen den einfachsten Weg, einen iFrame in Ihren WordPress-Blog einzubetten.

Warum iFrames verwenden?

Ein wichtiger Grund für die Verwendung von iFrames ist, dass Sie keine Videos oder andere Ressourcen auf Ihrer Website hosten müssen, was Ihre Bandbreite und Ihren Speicherplatz beansprucht.

Außerdem können Sie mit iFrames vermeiden, dass Sie den urheberrechtlich geschützten Inhalt anderer Personen verletzen. Anstatt deren Video oder andere Inhalte herunterzuladen und sie dann auf Ihre Website hochzuladen, fügen Sie sie einfach mit einem iFrame zu Ihrer Seite hinzu.

Ein weiterer Vorteil ist, dass wenn der ursprüngliche Inhalt geändert wird, wird er automatisch auch im iFrame aktualisiert.

Es gibt auch einige Nachteile bei der Verwendung von iFrames. Nicht alle Websites lassen es zu, dass Sie ihren Inhalt in einen iFrame einfügen. Außerdem kann der iFrame am Ende zu groß oder zu klein für Ihre Seite sein, und Sie müssen ihn manuell anpassen.

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

Das ist der Grund, warum viele Plattformen wie WordPress oEmbed bevorzugen. Sie können oEmbed verwenden, um Videos sowie einige andere Arten von Inhalten einzubetten, indem Sie einfach eine URL in Ihren WordPress-Beitrag einfügen. Der Inhalt wird automatisch an die Größe angepasst und hat auch auf mobilen Geräten die richtige Größe.

Wichtig: WordPress unterstützt oEmbed nicht für Facebook- und Instagram-Beiträge. Mehr dazu erfahren Sie in unserem vollständigen Leitfaden zum Facebook / Instagram oEmbed-Problem und wie Sie es beheben können.

Eine weitere großartige Alternative zu iFrames ist die Verwendung eines Plugins für soziale Feeds. Wir empfehlen die Verwendung der Plugins von Smash Balloon. Mit diesen können Sie Inhalte von Facebook, Instagram, Twitter und YouTube anzeigen.

Schauen wir uns nun drei verschiedene Möglichkeiten an, wie Sie iFrames zu Ihrer Website hinzufügen können.

1. Verwenden Sie den Einbettungscode der Quelle, um iFrame in WordPress hinzuzufügen

Viele große Websites haben eine Einbettungsoption für ihre Inhalte. Dadurch erhalten Sie den speziellen iFrame-Code, den Sie zu Ihrer Site hinzufügen müssen.

Auf YouTube können Sie diesen Code erhalten, indem Sie zum Video auf YouTube gehen und dann auf die Schaltfläche „Teilen“ darunter klicken.

Als Nächstes sehen Sie ein Popup mit mehreren Freigabeoptionen. Klicken Sie einfach auf die Schaltfläche „Einbetten“.

Nun zeigt Ihnen YouTube den iFrame-Code an. Standardmäßig enthält YouTube die Steuerelemente des Players. Wir empfehlen Ihnen außerdem, den datenschutzfreundlichen Modus zu aktivieren.

Klicken Sie anschließend auf die Schaltfläche Kopieren, um den Code zu kopieren.

Jetzt können Sie den Code in einen beliebigen Beitrag oder eine Seite auf Ihrer Website einfügen. Wir fügen ihn in eine neue Seite im Block-Editor ein.

Um eine neue Seite zu erstellen, gehen Sie in Ihrem WordPress-Dashboard auf Seiten “ Neu hinzufügen.

Fügen Sie dann einen HTML-Block zu Ihrer Seite hinzu.

Nun müssen Sie den YouTube-iFrame-Code in diesen Block einfügen.

Sie können dann eine Vorschau anzeigen oder Ihre Seite veröffentlichen, um das dort eingebettete YouTube-Video zu sehen.

Tipp: Wenn Sie den alten klassischen Editor verwenden, können Sie immer noch iFrame-Code hinzufügen. Sie müssen dies in der Textansicht tun.

Das Umschalten zwischen der visuellen und der Textansicht des klassischen Editors kann zu Problemen mit dem iFrame-Code führen.

2. Verwenden des iFrame-WordPress-Plugins zum Einbetten eines iFrames

Diese Methode ist nützlich, da Sie damit einen iframe erstellen können, um Inhalte aus einer beliebigen Quelle einzubetten, auch wenn diese Quelle keinen Einbettungscode bereitstellt.

Zunächst 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 ist das Plugin sofort einsatzbereit, ohne dass eine Einrichtung erforderlich ist. Fahren Sie fort und bearbeiten oder erstellen Sie einen Beitrag oder eine Seite. Fügen Sie dann einen Shortcode-Block hinzu.

Danach können Sie diesen Shortcode verwenden, um Ihren iFrame-Code einzugeben.

[iframe src="URL goes here"]

Ersetzen Sie einfach URL goes here durch die URL des Inhalts, den Sie auf Ihrer Seite einbetten möchten. Wir betten eine Google-Karte ein.

Tipp: Möglicherweise müssen Sie die Option Einbetten verwenden, um die direkte URL des Inhalts zu erhalten. Sie müssen nur die URL verwenden, nicht den Rest des Einbettungscodes.

Zeigen Sie als nächstes eine Vorschau an oder veröffentlichen Sie Ihren Post. Sie sollten die eingebettete Google-Karte auf Ihrer Website sehen.

Sie können optional Parameter zum iFrame-Shortcode hinzufügen, um die Anzeige des eingebetteten Inhalts zu ändern. Sie können zum Beispiel die Breite und Höhe festlegen und eine Bildlaufleiste oder einen Rahmen hinzufügen oder entfernen. Details finden Sie auf der Seite des iFrame-Plugins.

Tipp: Wenn Sie den klassischen Editor verwenden, können Sie den Shortcode einfach in Ihren Beitrag oder Ihre Seite einfügen. Sie brauchen nicht in die Textansicht zu wechseln.

3. Manuelles Erstellen des iFrame-Codes und Einbetten in WordPress

Wenn Sie kein iFrame-Plugin verwenden möchten, können Sie den iFrame-Code auch manuell erstellen. Dazu müssen Sie im WordPress-Inhaltseditor einen HTML-Block hinzufügen.

Zuerst müssen Sie diesen Code in Ihren HTML-Block einfügen.

Ersetzen Sie einfach „URL goes here“ durch die direkte URL für den Inhalt, den Sie einbetten möchten. Sie benötigen nur die URL selbst.

Hier betten wir eine Karte von Google ein.

Sie können dem HTML-Tag zusätzliche Parameter hinzufügen. Zum Beispiel können Sie die Breite und Höhe Ihres iFrames festlegen. Der unten stehende Code bedeutet, dass Ihr eingebetteter Inhalt 600 Pixel breit und 300 Pixel hoch angezeigt wird.

Dies ist nützlich, wenn Sie den eingebetteten Inhalt auf einen kleineren Bereich beschränken müssen.

Wir hoffen, dass dieser Artikel Ihnen geholfen hat zu lernen, wie Sie iFrame-Code einfach in WordPress einbetten können.