Alles, was du über das Einbetten einer iFrame wissen musst

Mit Hilfe von iFrames kannst du externen Inhalt nahtlos in eine Website integrieren. Wir erklären, wie das Einbetten eines iFrames funktioniert, wann iFrames nützlich sind und welche Risiken damit einhergehen.

Eine Einführung in iFrames

Ein iFrame oder Inline-Frame ist ein HTML-Element, mit dem externer Inhalt in eine Website integriert werden kann. Dies kann ein Video, eine Werbung, ein Dokument oder sogar eine vollständige sekundäre Website sein. Der Inhalt kann an beliebiger Stelle integriert werden, ohne ihn in die Struktur des Weblayouts einfügen zu müssen. Die Größe kann in der Regel angepasst werden.

 

Schritt für Schritt-Anleitung zum Einbetten eines iFrames

Das Einbetten eines iFrames ist sehr einfach. Wir erklären dir den Vorgang Schritt für Schritt:

1. Verwende folgenden Code: <iframe src="website.html" width="90%" height="400" name="iframe" title="Dies ist mein Video"></iframe>. Wie du sehen kannst, beginnt jeder Code-Schnipsel mit <iframe und endet mit </iframe>.
2. Füge den Pfad oder die URL des Inhalts, den du einbetten möchtest, nach src= hinzu. Die Adresse muss in Anführungszeichen stehen.
3. Für “name” und “title” füge Platzhalter ein, die angezeigt werden, falls der Inhalt nicht geöffnet werden kann.
4. Du kannst die Breite und Höhe des Inhalts individuell festlegen, damit keine unangemessenen Standardgrößen verwendet werden. Die Werte können in Prozent oder Pixel angegeben werden.
5. Wenn du ein Video einbetten möchtest, kannst du in der Regel ein vorgefertigtes iFrame verwenden. Klicke auf YouTube auf “Teilen” und dann auf “Einbetten”.
6. Jetzt kannst du den Code an der gewünschten Stelle auf deiner HTML-Seite platzieren.

Du kannst die folgenden Attribute verwenden, um das Aussehen des eingebetten Inhalts weiter anzupassen:

Rahmen:

• frameorder="0" -> Rahmen unsichtbar
• frameorder="1" -> Rahmen sichtbar

Scrollbalken:

• scrolling="yes" -> Scrollbalken erzwingen
• scrolling="no" -> Scrollbalken unterdrücken
• scrolling="auto" -> automatisch je nach benötigtem Platz

Ausrichtung:

• align="left" -> iFrame links ausrichten, nachfolgender Inhalt wird rechts um das iFrame herum platziert
• align="right" -> nachfolgender Inhalt wird links um das iFrame herum platziert
• align="middle" -> iFrame wird zentriert platziert

Abstand zu anderem Inhalt:

• marginwidth="x" -> Abstand rechts und links
• marginheight="x" -> Abstand oben und unten

iFrames in WordPress einbetten

Auf die oben beschriebene Weise kannst du iFrames auch im Content-Management-System WordPress verwenden. Öffne einfach den Beitrag oder die Seite, die du verwenden möchtest. Klicke dann oben rechts über dem Textfeld auf “Text” und füge den iFrame-Code an der gewünschten Stelle ein. Du kannst nun deinen Beitrag speichern und veröffentlichen.

Bitte beachte, dass das Einbetten von Inhalten nicht immer möglich ist, da Website-Administratoren das Einbetten deaktivieren können.

Anwendungsfälle für iFrames

Grundsätzlich kann mit iFrames beliebiger Inhalt in Websites eingebettet werden. Die häufigsten Anwendungsbereiche sind:

• YouTube-Videos: Eingebetteter YouTube-Inhalt wird häufig verwendet, um relevante Videos direkt für Benutzer verfügbar zu machen. Videos bringen viele Vorteile, wie z.B. visuelle Verbesserung und verbesserte Benutzererfahrung. YouTube komprimiert und puffert sogar Daten optimal, sodass Videos auch bei schlechten Datenleitungen abgespielt werden können.
• Google Maps: Das Einbetten von Karten von Google Maps ist auch ein häufig verwendetes Widget. Interaktive Karten mit Markierungen können angezeigt werden.
• Widgets: Neben der Integration von Google Maps bieten viele Unternehmen auch Frames in Form anderer Widgets an, z.B. Wetterberichte oder Buchungsplattformen.
• Anwendungen: Externe Anwendungen können verwendet werden, um zum Beispiel Kontaktformulare, Kommentarfunktionen, interaktive Terminkalender oder Rechner einzubinden. Schau dir unsere detaillierte Anleitung an, um maßgeschneiderte Apps auf deiner Website einzubetten.

Vor- und Nachteile von iFrames

Das Einbetten von Inhalten über iFrames ist sehr einfach zu handhaben und spart viel Programmieraufwand. Da der Inhalt des Rahmens unabhängig vom Rest der Seite geladen wird, ist der eingebettete Inhalt auch dann verfügbar, wenn andere Elemente noch nicht geladen wurden. Dadurch wird die Ladezeit reduziert und die Benutzer können bequem weiter surfen, was die Benutzererfahrung erhöht.

Es gibt jedoch auch einige Nachteile, die beim Einsatz von iFrames berücksichtigt werden sollten. Erstens können eingebetteter Inhalt nicht verlinkt oder als Lesezeichen gespeichert werden. Zweitens hast du keine Kontrolle über die Funktionalität des externen Inhalts. Es gibt also keine Garantie dafür, dass sich der Inhalt nicht irgendwann ändern oder gelöscht wird.

Für die Suchmaschinenoptimierung (SEO) sind iFrames ebenfalls problematisch, da die Bots von Google und Co. den Inhalt nicht erkennen. In einigen Fällen werden sie sogar als Duplikat-Inhalte eingestuft. Daher sollten iFrames als Teil deines Inhalts und nicht deiner Website betrachtet werden. Vermeide daher den Einsatz von iFrames für SEO-relevante Themen.

Noch ernster ist das Sicherheitsrisiko. Wenn du externen Inhalt einbettest, könnte dieser schädliche Plug-ins oder Phishing enthalten. Dabei handelt es sich um Versuche, über gefälschte Websites oder E-Mails personenbezogene Daten abzufangen. Wenn die Herkunft des iFrames jedoch bekannt ist, besteht wenig Risiko bei der Einbettung. Bei Inhalten von Open as App ist Sicherheit garantiert.

Vergiss nicht deine Barrierefreiheits-Checkliste für iFrames

Gib einfach deine Kontaktdaten ein, und wir senden dir unsere Checkliste zu. Diese Checkliste hilft dir dabei, alles rund um iFrames zu beachten. Sieh sie dir kostenlos an!