Oftmals erreicht mich die Frage, wie ein Iframe in WordPress eingebunden wird. Zusätzlich erfährst du in diesem Beitrag, wofür Iframes überhaupt notwendig sind, welche regelmäßigen Anwendungsfälle es gibt und wie du in WordPress Iframes mobil darstellen kannst.

Was ist ein Iframe eigentlich?

Ein Inlineframe (abgekürzt bekannt als Iframe) ist ein HTML-Element, welches zur strukturierten Darstellung von externen Webinhalten genutzt wird. Mithilfe eines Iframes können so unter anderem Loginformulare, GEO Karten oder YouTube-Videos in einer (WordPress-)Webseite eingebunden werden. Seit der HTML-Spezifikation 4.0 werden Iframes unterstützt. Sämtliche modernen Browser unterstützen das Einbinden von Inlineframes.

Wofür benötige ich in WordPress ein Iframe?

In WordPress werden Iframes dazu verwendet um zum Beispiel Anfahrtskarten oder Videos von externen Plattformen einzubinden.

Google Maps Anfahrtskarte in WordPress einbinden.

In diesem Abschnitt zeige ich dir nun, wie du eine Google Anfahrtskarte als Iframe in WordPress einbinden kannst.

  1. Öffne zuerst Google Maps, in dem du hier klickst.
  2. Gebe nun in der Suche den Ort ein, den du in deiner Google Karte anzeigen lassen möchtest. Als Beispiel nehme ich nun den Apple Store in Berlin.Iframe in WordPress einbetten(Google Map Karte mithilfe eines Iframes in WordPress einbinden.)
  3. Klicke anschließend auf den Teilen-Button in der linken Seitenleiste. Nun erhältst du nachfolgende Auswahlmöglichkeit.Iframe in WordPress einbinden - Google MapsNachdem du auf den Teilen-Button in der Seitenleiste von Google Maps geklickt hast, erscheint dieses PopUp. Nun kannst du wählen, ob du die Google Karte als Verlinkung in deiner Webseite oder als Karte einbauen möchtest. Wähle die Option Karte einbetten aus.
  4. In der nachfolgenden Ansicht wir dir die Karte angezeigt, welche durch den Standard Iframe-Code erzeugt wird.Iframe in WordPress einbinden - Google Maps Karte einbettenEs wird dir die Möglichkeit geboten, die Größe der Anfahrtskarte anzupassen. Dazu findest du unterhalb der Schaltfläche Karte einbetten eine kleine Rollbox, über jene kannst du anschließend zwischen Groß 800 x 600px, Mittel 600 x 450px (ist als Standardwert ausgewählt), klein 400 x 300px und einer benutzerdefinierten Größe auswählen.Iframe in WordPress einbinden - Google Maps Karte einbinden benutzerdefinierte Größe
  5. Markiere nun den generierten HTML-Code neben der zuvor beschriebenen Rollbox und kopiere diesen.

YouTube-Video in WordPress einbinden

  1. Rufe das Portal YouTube auf, dieses findest du hier.
  2. Suche nach dem Video, welches du in deiner WordPress Seite einbinden möchtest.
  3. Sofern du ein Video gefunden hast, welches du in deiner WordPress-Seite einbinden möchtest, klicke unterhalb des Videos auf den teilen-Button.Iframe in WordPress einbinden - YouTube-Video teilen
  4. In dem nachfolgendem PopUp klickst du nun auf Einbetten. In der Standardansicht wird dir ein Link zum versenden des YouTube-Videos angezeigt.Iframe in WordPress einbinden - YouTube-Video einbetten
  5. Im letzten Schritt erhältst du folgende Ansicht, in der du noch weitere Konfigurationen vornehmen kannst.
    Du kannst neben der Größe des Iframes noch einstellen, ab welcher Spielminute das Video starten soll, ob am Ende des Videos weitere Videos vorgeschlagen oder ob die Steuerelemente für das Video angezeigt werden sollen.
    Iframe in WordPress einbinden
    Kopiere nun das Iframe in deine Zwischenablage.

Iframe in WordPress einbinden

Mithilfe des visueller Editor

Schön und gut, dass wir nun wissen, wie wir Iframes von Google und YouTube erstellen, aber wie werden diese denn nun in WordPress eingebunden? Vorab möchte ich erwähnen, dass grundsätzlich kein Plugin benötigt wird. Die einzige Ausnahme besteht darin, wenn du ein YouTube-Video mobil ohne schwarze Ränder darstellen möchtest. Hierfür ist eine kleine programmatische Anpassung notwendig, welche beispielsweise mithilfe eines Shortcodes gelöst werden kann.

  1. Zu Beginn öffne deinen WordPress-Beitrag/-Seite und wechsele in den Text-Reiter (HTML-Modus).Iframe in WordPress einbinden - Iframe im HTML Modus einbinden
  2. Sofern du nun den Iframe-Code in den WordPress eingefügt hast, kannst du wieder in den visuellen Editor wechseln. Siehe da, nun wird das Video angezeigt. Speichere den Beitrag ab und sieh ihn dir im Frontend an.
    Iframe in WordPress einbinden - YouTube Video Ansicht im visuellen Editor
    Kleiner Hinweis am Rande: Solltest du das Iframe in den visuellen Editor kopieren, werden durch diesen die Sonderzeichen wie zum Beispiel < und > in HTML-Code umgewandelt. Aus diesem Grund müssen wir den Weg über die HTML-Ansicht gehen.
    Iframe in WordPress einbinden - Iframe im Visuellen Editor

Mit dem Page Builder von SiteOrigin

Im Page Builder von SiteOrigin haben wir mehrere verschiedene Möglichkeiten ein Iframe in WordPress einzubinden.

  1. Wir nutzen den HTML-Baustein, welcher reines HTML anzeigen lässt.
  2. Du kannst den SiteOrigin Editor-Baustein verwenden und fügst das Iframe über den Text-Reiter (HTML-Modus) ein.
  3. Für die Google Maps Anbindung gibt es einen eigenen Baustein. Hier muss lediglich ein API-Code von Google eingeholt und in dem Baustein hinterlegt werden. Anschließend kannst du deine Zieladresse auswählen und schon wird eine Google Karte erzeugt.

8 Responses

  1. Hi, danke für den Tip mit dem Iframe, so wie sie es geschrieben haben geht es auch, wenn man es vom HTML einfügt in meinem beispiel ein GPS Track

    wenn ich dann auf Visuell gehe, sehe ich ihn auch, wenn ich dann aber auf Vorschau gehe, sehe ich ihn nicht mehr, da kommt nur ein link!

    Liegt es daran, weil ich die Basis Version nutze?

    ich bekomme es einfach nicht hin, dass mir die Karte angezeigt wird. Über Hilfe wäre ich dankbar

    LG Markus

  2. Hallo Jan,
    vielen dank für Deinen Beitrag.
    Ich sitze gerade an der Herausforderungen, ein Video oder alternativ ein iframe in Woocommerce im Shop einzubauen. Ich verwende dabei den Divibuilder.
    Deine Erklärung verstehe ich soweit. Nur kann ich es nicht für Woocommerce übernehmen. Kannst du mir hier helfen?

    Lieben Gruß und vielen Dank im Vorfeld.
    Hannes

    1. Hallo Hannes,

      nimm in dem Divi Builder bitte einmal den „Code“-Baustein und füge das iFrage wie in dem Screenshot ein.
      Nun sollte alles sauber funktionieren – den Rest macht nämlich das Theme.

      Beste Grüße
      Jan

      Divi Builder iFrame einbinden

  3. Hallo,
    danke für die Erläuterungen. Ist es möglich eine Woocommerce Shop Seite auf einer „normalen“ html Seite per iFrame einzubinden?
    Grüße
    Max

Schreibe einen Kommentar zu Hannes Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert