Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Einfaches Einbetten von iFrame-Code in WordPress (3 Methoden)

Hinweis der Redaktion: Wir erhalten eine Provision für Partnerlinks auf WPBeginner. Die Provisionen haben keinen Einfluss auf die Meinung oder Bewertung unserer Redakteure. Erfahre mehr über Redaktioneller Prozess.

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

iFrames sind eine einfache Möglichkeit, Videos oder andere Inhalte auf Ihrer Website zu zeigen, ohne sie hochzuladen. Viele Drittanbieter-Plattformen wie YouTube bieten iFrame-Code an, den Sie einfach in Ihre Website einfügen können.

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

Easily embedding iFrame code in WordPress

Was ist iFrame?

Mit einem iFrame (kurz für Inline-Frame) können Sie Videos oder andere Inhalte auf Ihrer Website einbetten, ohne dass Sie das Video selbst hosten müssen. Dadurch können Sie Bandbreite und Speicherplatz sparen, weshalb Sie niemals ein Video direkt in WordPress hochladen sollten.

Der iFrame verbessert nicht nur die Geschwindigkeit und Leistung von WordPress, sondern wird auch automatisch aktualisiert, wenn sich der ursprüngliche Inhalt ändert. Das bedeutet, dass die Besucher immer die neueste Version des Inhalts sehen.

Das Einbetten von urheberrechtlich geschützten Inhalten über einen iFrame verstößt auch nicht gegen das Urheberrecht und kann Sie so vor Klagen schützen.

Sehen wir uns nun an, wie Sie iFrame-Code ganz einfach in WordPress einbetten können. Verwenden Sie einfach die Quicklinks, um direkt zu der gewünschten Methode zu gelangen:

Methode 1: iFrame mit dem Code der Quelle in WordPress einbetten (schnell und einfach)

Viele große Videohosting-Websites bieten die Option „Einbetten“ an, mit der Sie Zugang zum iFrame-Code erhalten, 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 lassen Sie uns YouTube als Beispiel nehmen. Um YouTube-Videos in WordPress einzubetten, klicken Sie einfach auf die Schaltfläche „Teilen“ unter dem Video, das Sie verwenden möchten.

Clicking the Share button for your chosen YouTube video

Daraufhin wird ein Popup mit verschiedenen Freigabeoptionen angezeigt.

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

Clicking the Embed button to get the YouTube embed code

YouTube zeigt Ihnen nun den iFrame-Code an.

Standardmäßig aktiviert YouTube das Kontrollkästchen „Player-Kontrollen anzeigen“, aber wir empfehlen auch, den datenschutzfreundlichen Modus zu aktivieren. In diesem Modus können Besucher die eingebetteten Inhalte auf Ihrer WordPress-Website ansehen, ohne dass dies ihr Surferlebnis auf YouTube beeinflusst.

Danach klicken Sie auf die Schaltfläche „Kopieren“.

Adding a YouTube video to your WordPress website

Nun können Sie diesen Code in einen beliebigen Beitrag oder eine Seite Ihrer Website einfügen. In dieser Anleitung fügen wir ihn in eine neue Seite im WordPress-Blockeditor ein.

Öffnen Sie einfach die Seite und klicken Sie dann auf die Schaltfläche „+“. In dem daraufhin angezeigten Popup geben Sie „HTML“ ein, um den benutzerdefinierten HTML-Block zu finden.

Adding a custom HTML block in WordPress

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

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

Pasting the YouTube HTML code into the iFrame block

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

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

Nicht jede Website von Drittanbietern bietet einen vorgefertigten Einbettungscode. Wenn Sie keine Einstellungen für „Teilen“ oder „Einbetten“ finden, können Sie mit dem iFrame-Plugin ganz einfach Ihren eigenen iFrame-Code erstellen.

Zunächst müssen Sie das iFrame-Plugin installieren und aktivieren. Weitere Einzelheiten finden Sie in unserer Schritt-für-Schritt-Anleitung für die Installation eines WordPress-Plugins.

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

Adding a shortcode block in the block editor

Danach fügen Sie den folgenden Shortcode hinzu:

[iframe src="URL goes here"]

Ersetzen Sie einfach „URL goes here“ durch die URL des Inhalts, den Sie auf Ihrer Website einbetten möchten.

Fügen wir zum Beispiel eine Google-Karte in WordPress ein, da dies eine einfache Möglichkeit für Geschäfte, Restaurants und andere Einrichtungen ist, eine Wegbeschreibung in ihr Kontaktformular einzufügen.

Tipp: Je nach Quelle müssen Sie möglicherweise auf eine „Teilen“- oder ähnliche Einstellung klicken, um die direkte, einbettbare URL des Inhalts zu sehen.

The shortcode to embed a Google map

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

Sie sollten nun den Inhalt auf Ihrer Website eingebettet sehen.

An embedded Google Map, on a WordPress website

Alle verfügbaren Parameter können Sie auf der Seite des iFrame-Plugins nachlesen.

Methode 3: Manuelles Erstellen des iFrame-Codes in WordPress (kein Plugin erforderlich)

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

Easily embedding iframe code in WordPress

Fügen Sie zunächst den folgenden Code in Ihren HTML-Block ein:

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

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

Hier betten wir eine Google-Karte ein:

Entering the iFrame code for the Google map

Sie können zusätzliche Parameter hinzufügen, um das Aussehen des Inhalts auf Ihrer Website zu ändern. 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 in einem kleineren Bereich anzeigen müssen. Zum Beispiel können Sie die Größe des Inhalts ändern, nachdem Sie die mobile Version Ihrer WordPress-Website getestet haben.

The Google map on the site with a set height and width

Was sind einige iFrame-Alternativen?

Die Verwendung von iFrames hat auch einige Nachteile.

Nicht alle Websites erlauben es, ihren Inhalt in einen iFrame zu setzen, und Sie müssen den Inhalt möglicherweise manuell anpassen, damit er in dem verfügbaren Platz gut aussieht.

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

Aus diesem Grund bevorzugen viele Plattformen wie WordPress oEmbed.

Oft 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 des oEmbed automatisch an den verfügbaren Platz an, sodass es auf Desktop, Smartphones und Tablets immer perfekt aussieht.

Wichtig: WordPress unterstützt oEmbed für Facebook- und Instagram-Posts standardmäßig nicht mehr. Weitere Informationen zu diesem Thema finden Sie in unserer vollständigen Anleitung zur Behebung des Facebook- und oEmbed-Problems in WordPress.

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

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

An example of an Instagram feed, created using Smash Balloon

Hier finden Sie einige Anleitungen zum Hinzufügen von Social Media Feeds mit Smash Balloon:

Wir hoffen, dass dieser Artikel Ihnen geholfen hat, zu lernen, wie Sie iFrame-Code in WordPress einbetten können. Sehen Sie sich auch unsere Anleitung an, wie Sie PHP in WordPress-Beiträgen und -Seiten zulassen können, und lesen Sie unsere Expertenauswahl der besten YouTube-Galerie Plugins für WordPress.

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.

Offenlegung: Unsere Inhalte werden von unseren Lesern unterstützt. Das bedeutet, dass wir möglicherweise eine Provision verdienen, wenn Sie auf einige unserer Links klicken. Mehr dazu erfahren Sie unter Wie WPBeginner finanziert wird , warum das wichtig ist und wie Sie uns unterstützen können. Hier finden Sie unseren redaktionellen Prozess .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Das ultimative WordPress Toolkit

Erhalte KOSTENLOSEN Zugang zu unserem Toolkit - eine Sammlung von WordPress-bezogenen Produkten und Ressourcen, die jeder Profi haben sollte!

Reader Interactions

7 KommentareEine Antwort hinterlassen

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. M. Faisal. says

    thanks for your article of how to easily embed iframe code in wordpress.

    Now i am trying to embed iframe code in wordpress for google map.

    i am success it for solving this problem.

    Thanks and regards.

  3. Kathleen says

    Thanks for this. When embedding a YouTube video, how can I add a title to the iframe for screen readers, for accessibilty purposes?

    • WPBeginner Support says

      You would need to check with the support for the iframe you’re trying to embed for title options available.

      Admin

Eine Antwort hinterlassen

Danke, dass du einen Kommentar hinterlassen möchtest. Bitte beachte, dass alle Kommentare nach unseren kommentarpolitik moderiert werden und deine E-Mail-Adresse NICHT veröffentlicht wird. Bitte verwende KEINE Schlüsselwörter im Namensfeld. Lass uns ein persönliches und sinnvolles Gespräch führen.