iFrame einbinden – das müssen Sie wissen

Mithilfe von iFrames können Sie beliebige externe Inhalte in eine Website einbinden. Wir erklären Ihnen, wie das funktioniert, wann sich iFrames als sinnvoll erweisen und welche Risiken es gibt.

Was ist ein iFrame?

Ein iFrame bzw. Inlineframe (engl. Frame = dt. Rahmen) ist ein HTML-Element, mit dem fremde Inhalte in eine Website eingebunden werden können. Das kann ein Video, Werbung, ein Dokument oder eine komplette sekundäre Website sein. Der Inhalt kann an einer beliebigen Stelle integriert werden, ohne dass er in die Struktur des Web-Layouts eingefügt werden muss. Auch die Anpassung der Größe ist in der Regel möglich.

iFrame einbinden – Schritt für Schritt

Das Einbinden eines iFrame ist denkbar einfach. Wir erklären Ihnen das Vorgehen Schritt für Schritt:

1. Verwenden Sie folgenden Code: <iframe src=„einewebseite.html“ width=„90%“ height=„400“ name=„iFrame“ title=„Das ist mein Video“></iframe>. Wie Sie sehen, fängt jeder Programmausschnitt mit <iframe an und endet mit </iframe>.
2. Fügen Sie hinter src= den Pfad bzw. die URL zu dem Inhalt ein, den Sie einbinden möchten. Die Adresse muss in Anführungszeichen stehen.
3. Bei „name“ und „title“ tragen Sie Platzhalter ein, die angezeigt werden, wenn Ihr Inhalt nicht geladen werden kann.
4. Bei „width“ und „height“ können Sie die Breite und Höhe des Inhalts individuell festlegen, damit keine unpassenden Standardgrößen verwendet werden. Die Werte geben Sie im Verhältnis zur Website in Prozent oder Pixeln an.
5. Möchten Sie ein Video einbinden, könne Sie in der Regel ganz einfach einen fertigen iFrame generieren. Bei YouTube rufen Sie „Teilen“ und anschließend „Einbetten“ auf. Unter „Mehr anzeigen“ können Sie die Player-Elemente noch modifizieren.
6. Nun können Sie den Code an gewünschter Position auf Ihrer HTML-Seite einfügen.

iFrame-Attribute anpassen

Mit folgenden Attributen können Sie die Darstellung des eingebundenen Inhalts noch weiter anpassen:

Rahmen:

• frameorder=“0“ à Rahmen nicht sichtbar
• frameorder=“1“ à Rahmen sichtbar

Bildlaufleisten:

• scrolling=“yes“ à Bildlaufleisten erzwingen
• scrolling=“no“ à Bildlaufleisten unterdrücken
• scrolling=“auto“ à automatisch nach Platzbedarf

Ausrichtung:

• align=“left“ à iFrame wird links platziert, nachfolgende Inhalte fließen rechts um ein iFrame
• align=“right“ à nachfolgende Inhalte fließen links um ein iFrame
• align=“middle“ à iFrame wird mittig platziert

Abstand zu anderen Inhalten:

• marginwidth=“x“ à Abstand rechts und links
• marginheight=“x“ à Abstand oben und unten

iFrames in WordPress einbinden

Auf die oben beschriebene Weise können Sie auch iFrames in dem Content-Management-System (CMS) WordPress verwenden. Öffnen Sie dazu einfach den entsprechenden Beitrag oder die Seite. Anschließend klicken Sie rechts oben über dem Textfeld auf „Text“ und fügen den iFrame-Code an der gewünschten Stelle ein. Nun können Sie Ihren Beitrag speichern und veröffentlichen.

Im Allgemeinen ist die Einbindung von Inhalten allerdings nicht immer möglich, da Website-Administratoren die Möglichkeit haben, das Einbetten zu deaktivieren.

Anwendungsbereiche von iFrames

Prinzipiell können jegliche Inhalte mithilfe von iFrames in Websites eingebettet werden. Die gängigsten Anwendungsbereiche sind:

• YouTube-Videos: Eingebettete YouTube-Inhalte werden gerne eingesetzt, um Usern relevante Videos direkt zugänglich zu machen. Bewegtbilder bringen viele Vorteile wie eine optische Aufwertung und die Verbesserung des Besuchererlebnisses mit sich. YouTube komprimiert und puffert die Daten sogar optimal, wodurch Videos selbst bei schlechter Datenleitung abgespielt werden können.
• Google Maps: Das Einbinden von Karten aus Google Maps gehört ebenfalls zu den häufig verwendeten Anwendungsbereichen. So können interaktive Karten mit Markierungen angezeigt werden.
• Widgets: Neben der Einbindung von Google Maps bieten viele Unternehmen Frames in Form von anderen Widgets an. Es können zum Beispiel Wetterberichte, Buchungsplattformen oder die aktuelle Uhrzeit angezeigt werden.
• Applikationen: Über externe Applikationen können zum Beispiel Kontaktformulare, Kommentarfunktionen oder interaktive Terminkalender oder Rechner integriert werden. Hier finden Sie eine ausführliche Anleitung, wie Sie mit Open as App erstellte Apps in Ihre Website einbinden können.

Vor- und Nachteile von iFrames

Das Einbetten von Inhalten über iFrames ist sehr einfach in der Handhabung und spart sehr viel Programmieraufwand. Da der Inhalt des Frames unabhängig vom Rest der Seite geladen wird, steht der eingebundene Inhalt auch bereit, wenn andere Elemente noch nicht geladen wurden, und es wird Ladezeit gespart. User können zudem bequem auf der Webseite weitersurfen, wodurch die User Experience steigt.

Es gibt aber einige Nachteile, die bei der Nutzung von iFrames beachtet werden sollten. Zum einen können keine Links oder Bookmarks auf eingebettete Inhalte gesetzt werden. Zum anderen haben Sie keine Kontrolle über die Funktionalität des externen Inhalts. Es besteht demnach keine Garantie, dass ein Inhalt nicht irgendwann geändert oder gelöscht wird.

Für Suchmaschinenoptimierung (SEO) sind iFrames ebenfalls problematisch, da die Bots von Google und Co. die Inhalte nicht berücksichtigen. In einigen Fällen werden sie sogar als Duplicate Content bewertet. Deshalb sollten Frames als Teil Ihres Inhalts jedoch nicht Ihrer Webseite angesehen werden. Bei SEO-relevanten Themen sollten Sie demnach auf die Verwendung von iFrames verzichten.

Noch schwerwiegender ist das Sicherheitsrisiko. Wenn Sie einen externen Inhalt einbetten, kann dieser zum Beispiel ein schädliches Plug-in enthalten oder Phishing betreiben. Dabei handelt es sich um Versuche, über gefälschte Webseiten oder E-Mails persönliche Daten zu beschaffen. Wenn der Ursprung des iFrames allerdings seriös ist, bestehen kaum Risiken beim Einbetten. Bei Inhalten von Open as App ist die Sicherheit garantiert.