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 Inline Frame) ermöglicht es Ihnen, Videos oder andere Inhalte auf Ihrer Website einzubetten, ohne das Video tatsächlich hosten zu müssen. Dies kann Bandbreite und Speicherplatz sparen, weshalb Sie niemals ein Video direkt in WordPress hochladen sollten.

Neben der Verbesserung Ihrer WordPress-Geschwindigkeit und -Leistung 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 haben 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 aktiviert YouTube das Kontrollkästchen 'Player-Steuerelemente anzeigen', aber wir empfehlen auch, den datenschutzfreundlichen Modus zu aktivieren. Dieser Modus ermöglicht es Besuchern, die eingebetteten Inhalte auf ihrer WordPress-Website anzusehen, ohne dass dies ihre Surferfahrung auf YouTube beeinflusst.

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

Jetzt können Sie diesen Code in jeden Beitrag oder jede Seite auf Ihrer Website einfügen. In diesem Leitfaden fügen wir ihn 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 anzuzeigen.

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, können Sie mit dem iFrame-Plugin ganz einfach Ihren eigenen iFrame-Code erstellen.

Zuerst müssen Sie das iFrame-Plugin installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung zum Installieren 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 fügen wir eine Google Map in WordPress ein, da dies eine einfache Möglichkeit für Geschäfte, Restaurants und andere Orte ist, Wegbeschreibungen 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-Inhaltseditor 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 den eingebetteten Inhalt auf kleinerem Raum anzeigen müssen. Sie möchten beispielsweise den Inhalt nach dem Testen der mobilen Version Ihrer WordPress-Website in der Größe ä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.

Oft können Sie oEmbed zum Einbetten von Videos und anderen Inhalten verwenden, indem Sie einfach eine URL in den WordPress-Beitrag einfügen. WordPress passt die Größe von oEmbed automatisch an den verfügbaren Platz an, 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 Smash Balloon es 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 einfach iFrames in WordPress hinzufügen können. Möglicherweise möchten Sie auch unsere Anleitungen zum Einbetten von SoundCloud in WordPress und zum Deaktivieren von Einbettungen in WordPress überprüfen.

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.