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.

Embedding an iframe - step by step

Alexandra Müller

Guide

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.

Kategorie

Apps Bewährte Methode Eigenschaften Fallstudie Guide Presse Uncategorized Veranstaltungen Webinare

Beliebte Beiträge

Alexandra Müller

Werksabnahme per App – das müssen Sie wissen

Factory Acceptance Test per App

Alexandra Müller

Pflicht zur Arbeitszeiterfassung – Umsetzung mit smarten Apps

Arbeitszeiterfassung mit smarten Apps

Alexandra Müller

So können Sie Ihre Produktionsplanung mit Apps optimieren

Produktionsplanung mit Apps optimieren

Alexandra Müller

Projektmanagement: Wieso Sie nicht auf Checklisten verzichten können

Projektmanagement-Checkliste

Alexandra Müller

11 gute Gründe für eine Unternehmens-App

Young urban professional man using smart phone in office building indoors. Businessman holding mobile smartphone using app texting sms message wearing suit jacket and bag.

Alexandra Müller

Checkliste für Baustellensicherheit – mit einer smarten App zu mehr Sicherheit

Checkliste für Baustellensicherheit – mit einer smarten App zu mehr Sicherheit

Alexandra Müller

Wie hoch sind die Kosten für die Entwicklung einer App?

Wie hoch sind die Kosten für die Entwicklung einer App?

Alexandra Müller

Digitales Bautagebuch einfach erstellen

Digitales Bautagebuch mit Open as App erstellen

Alexandra Müller

CRM-Systeme mit Excel erstellen

CRM-Systeme mit Excel erstellen

Alexandra Müller

Wie Sie mit No-Code-Apps Geld verdienen können

make money with no-code apps

Alexandra Müller

Die 8 besten App-Baukästen

Mit einem App-Baukasten einfach eine App selbst erstellen

Alexandra Müller

Wie kann ich eine App erstellen?

App erstellen - so funktioniert es

Alexandra Müller

iFrame einbinden – das müssen Sie wissen

Embedding an iframe - step by step

Manfred Streit

Der Basis-Guide für No-Code-Apps

basis guide no-code apps

Angelika Methner

Self-Service App mit Google Sheets oder Excel – drei Strategien für Einsteiger

self service app

Angelika Methner

MWC und 4YFN Barcelona – der Hotspot für Innovation und Impact

MWC und 4YFN Barcelona

Angelika Methner

Michael Stoelwinder wird CEO von Open as App

Michael_Stoelwinder_OpenasApp

Angelika Methner

Neues Preismodell 2021

pricing

Angelika Methner

Selber Brot backen – mit dieser App geht es ganz einfach

home made bread

Angelika Methner

Immobilienvermarktung mit No-Code-Apps – so geht’s

Boost real estate agent performance

Borislav Kiprin

Open as App bringt Produktivitäts-Schub für nicht-technische Citizen Developer in Microsoft 365

microsoft

Angelika Methner

Industrie 4.0 trifft No-Code – mobile Apps für Industrie

man holding gray steel frame

Angelika Methner

Top App-Design: Tipps & Ideen für mobile Apps

person writing on white paper

Borislav Kiprin

5 schnelle Excel-Tricks für Unternehmen zum App-Erstellen

two person standing on gray tile paving

Angelika Methner

Schatten-IT und ihre Folgen für Unternehmen

shadow it

Angelika Methner

Wie Sie Ihr Beratungsgeschäft mit Apps ausbauen

consulting business

Borislav Kiprin

Business Apps mit Google Sheets erstellen

Create an app with Google Sheets

Angelika Methner

Geschäftsdaten in der Dropbox aufräumen & organisieren

Organize Dropbox for business

Angelika Methner

Vertriebskalkulations-Apps stärken Ihr Verkaufsteam

Empower your sales team with calculation apps

Angelika Methner

SQL zu App: Nutzen Sie Ihre Daten effizienter

SQL to app

Borislav Kiprin

7 individuelle Vertriebsapps für starke Leistung im Vertrieb

sales meeting with custom apps

Angelika Methner

Erstellen Sie eine Finanzplan-App basierend auf Ihrer Datei

Financial Plan App

Angelika Methner

Die 5 Vorteile, wenn Sie Cloud-Daten als App teilen

Sharing cloud data app

Angelika Methner

Wie Unternehmen Industrie-Prozesse optimieren können

Manufacturing apps

Angelika Methner

Listen-Apps fördern die Datenerfassung & den Informationsfluss

List Apps Boosts Data Collection and Information Exchange

Borislav Kiprin

Verbessern Sie die Nutzung von Microsoft-Tools

microsoft

Let’s keep in touch!

Newsletter-Girl
Factory Acceptance Test per App

Alexandra Müller

Werksabnahme per App – das müssen Sie wissen

Arbeitszeiterfassung mit smarten Apps

Alexandra Müller

Pflicht zur Arbeitszeiterfassung – Umsetzung mit smarten Apps

Produktionsplanung mit Apps optimieren

Alexandra Müller

So können Sie Ihre Produktionsplanung mit Apps optimieren

Projektmanagement-Checkliste

Alexandra Müller

Projektmanagement: Wieso Sie nicht auf Checklisten verzichten können

Young urban professional man using smart phone in office building indoors. Businessman holding mobile smartphone using app texting sms message wearing suit jacket and bag.

Alexandra Müller

11 gute Gründe für eine Unternehmens-App

Checkliste für Baustellensicherheit – mit einer smarten App zu mehr Sicherheit

Alexandra Müller

Checkliste für Baustellensicherheit – mit einer smarten App zu mehr Sicherheit

Wie hoch sind die Kosten für die Entwicklung einer App?

Alexandra Müller

Wie hoch sind die Kosten für die Entwicklung einer App?

Digitales Bautagebuch mit Open as App erstellen

Alexandra Müller

Digitales Bautagebuch einfach erstellen

CRM-Systeme mit Excel erstellen

Alexandra Müller

CRM-Systeme mit Excel erstellen