html mit Adi Prinz

Das iframe-Element

Das Attribut src enthält die Adresse des Dokuments, das im eingebetteten Bereich angezeigt werden soll.

<iframe
  src="beispiele/beispiel.html"
  title="Beispiel für eine eingebettete Webseite">
</iframe>
    

Ein iframe erzeugt innerhalb der aktuellen Seite einen eigenen Bereich, in dem ein weiteres Dokument geladen wird.

Das eingebettete Dokument bleibt ein eigenständiges HTML-Dokument mit eigener Struktur, eigenen Stylesheets und eigenen Skripten.

Einen verständlichen Titel angeben

Jedes iframe sollte ein aussagekräftiges title-Attribut besitzen. Der Titel beschreibt den Inhalt oder Zweck des eingebetteten Bereichs.

<iframe
  src="kontaktformular.html"
  title="Kontaktformular">
</iframe>
    

Assistierende Technologien können den Titel verwenden, um den eingebetteten Inhalt anzukündigen.

Angaben wie title="iframe" oder title="Inhalt" sind zu ungenau. Der Titel sollte konkret beschreiben, was eingebettet wurde.

Breite und Höhe festlegen

Mit den Attributen width und height werden die ursprünglichen Abmessungen des eingebetteten Bereichs angegeben.

<iframe
  src="beispiele/beispiel.html"
  title="HTML-Beispiel"
  width="800"
  height="450">
</iframe>
    

Für eine responsive Darstellung kann die Breite zusätzlich mit CSS an den verfügbaren Platz angepasst werden.

.responsive-iframe {
  display: block;
  width: 100%;
  max-width: 800px;
  height: 450px;
  border: 0;
}
    

<iframe
  class="responsive-iframe"
  src="beispiele/beispiel.html"
  title="HTML-Beispiel"
  width="800"
  height="450">
</iframe>
    

Eine feste Höhe kann bei einfachen eingebetteten Inhalten ausreichend sein. Das iframe passt seine Höhe jedoch nicht automatisch an den Inhalt des eingebetteten Dokuments an.

Ein responsives Seitenverhältnis verwenden

Videos und vergleichbare Medien sollen ihre Proportionen auch bei unterschiedlichen Bildschirmbreiten beibehalten. Dafür eignet sich die CSS-Eigenschaft aspect-ratio.

.video-frame {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}
    

<iframe
  class="video-frame"
  src="https://www.youtube.com/embed/VIDEO_ID"
  title="HTML-Lernvideo"
  allowfullscreen>
</iframe>
    

Bei einem Seitenverhältnis von 16 / 9 berechnet der Browser die benötigte Höhe automatisch aus der verfügbaren Breite.

Ein YouTube-Video einbetten

Videoplattformen stellen normalerweise einen vorbereiteten Einbettungscode zur Verfügung. Bei YouTube wird dafür eine spezielle /embed/-Adresse verwendet.

<iframe
  src="https://www.youtube.com/embed/VIDEO_ID"
  title="HTML-Grundlagen"
  width="560"
  height="315"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
  allowfullscreen>
</iframe>
    

• src enthält die Einbettungsadresse des Videos.
• title beschreibt den Inhalt des Videos.
• allow erlaubt ausgewählte Browserfunktionen.
• allowfullscreen ermöglicht die Vollbildanzeige.

Die normale Adresse einer YouTube-Videoseite kann nicht einfach als Einbettungsadresse verwendet werden. Am sichersten ist der von YouTube bereitgestellte Einbettungscode.

Eingebettete Inhalte später laden

Externe Inhalte können die Ladezeit einer Webseite erhöhen. Mit loading="lazy" wird das iframe normalerweise erst geladen, wenn es sich dem sichtbaren Bereich nähert.

<iframe
  src="https://www.youtube.com/embed/VIDEO_ID"
  title="CSS-Lernvideo"
  width="560"
  height="315"
  loading="lazy"
  allowfullscreen>
</iframe>
    

Inhalte, die sich beim Öffnen der Seite sofort im sichtbaren Bereich befinden, sollten nicht unnötig verzögert geladen werden.

Browserfunktionen mit allow freigeben

Das Attribut allow legt fest, welche Browserfunktionen der eingebettete Inhalt verwenden darf.

<iframe
  src="https://example.com/anwendung"
  title="Eingebettete Anwendung"
  allow="fullscreen; geolocation">
</iframe>
    

Mehrere Berechtigungen werden durch Semikolons voneinander getrennt. Welche Berechtigungen notwendig sind, hängt vom eingebetteten Inhalt ab.

Es sollten nur die Funktionen freigegeben werden, die der eingebettete Inhalt tatsächlich benötigt.

Eingebettete Inhalte mit sandbox einschränken

Das Attribut sandbox schränkt die Möglichkeiten des eingebetteten Dokuments ein. Ein leeres sandbox-Attribut aktiviert zahlreiche Schutzmaßnahmen.

<iframe
  src="beispiele/fremder-inhalt.html"
  title="Eingeschränkter Beispielinhalt"
  sandbox>
</iframe>
    

Benötigte Funktionen können anschließend gezielt erlaubt werden.

<iframe
  src="beispiele/anwendung.html"
  title="Eingebettete Anwendung"
  sandbox="allow-forms allow-scripts">
</iframe>
    

• allow-forms erlaubt das Absenden von Formularen.
• allow-scripts erlaubt die Ausführung von JavaScript.
• allow-popups erlaubt das Öffnen neuer Fenster.
• allow-same-origin erhält die ursprüngliche Herkunft des eingebetteten Dokuments.

Die Kombination aus allow-scripts und allow-same-origin kann bei Inhalten derselben Herkunft einen großen Teil der Schutzwirkung aufheben. Berechtigungen sollten daher sorgfältig gewählt werden.

HTML-Inhalt direkt mit srcdoc angeben

Mit dem Attribut srcdoc kann ein kleines HTML-Dokument direkt im iframe angegeben werden.

<iframe
  title="Einfaches HTML-Beispiel"
  srcdoc="
    <h2>Hallo Welt</h2>
    <p>Dieser Inhalt steht direkt im srcdoc-Attribut.</p>
  ">
</iframe>
    

Enthält der HTML-Code Anführungszeichen oder Sonderzeichen, müssen diese passend codiert werden. Umfangreiche Dokumente sollten besser in einer eigenen Datei gespeichert werden.

srcdoc eignet sich besonders für kleine Vorschauen und einfache Lernbeispiele.

Sicherheit und Datenschutz beachten

Beim Laden eines externen iframe wird eine Verbindung zum Anbieter des eingebetteten Inhalts hergestellt. Dabei können Daten wie die IP-Adresse übertragen und Cookies gesetzt werden.

• Nur vertrauenswürdige Inhalte einbetten.
• Unnötige Berechtigungen vermeiden.
• Das Attribut sandbox prüfen und gezielt einsetzen.
• Datenschutzbestimmungen externer Anbieter berücksichtigen.
• Externe Videos oder Karten gegebenenfalls erst nach Zustimmung des Benutzers laden.

Ein eingebetteter Inhalt ist technisch nicht automatisch Bestandteil der eigenen Webseite. Er wird vom angegebenen Anbieter geladen und kann dessen Datenschutzregeln unterliegen.

iframe-Inhalte zugänglich einbetten

• Ein verständliches title-Attribut angeben.
• Den eingebetteten Inhalt im umgebenden Text ankündigen.
• Auf eine vollständige Tastaturbedienung achten.
• Videos mit Untertiteln und weiteren Alternativen bereitstellen.
• Wenn möglich, zusätzlich einen direkten Link zum Inhalt anbieten.

<p>
  Das folgende Video erklärt die wichtigsten HTML-Elemente.
</p>

<iframe
  src="https://www.youtube.com/embed/VIDEO_ID"
  title="Die wichtigsten HTML-Elemente"
  width="560"
  height="315"
  loading="lazy"
  allowfullscreen>
</iframe>

<p>
  <a href="https://www.youtube.com/watch?v=VIDEO_ID">
    Video direkt auf YouTube öffnen
  </a>
</p>
    

Wichtige Attribute des iframe-Elements

• src – Adresse des eingebetteten Dokuments
• srcdoc – direkt angegebener HTML-Inhalt
• title – verständliche Bezeichnung des Inhalts
• width – ursprüngliche Breite
• height – ursprüngliche Höhe
• loading – steuert verzögertes Laden
• allow – erlaubt ausgewählte Browserfunktionen
• allowfullscreen – ermöglicht die Vollbildanzeige
• sandbox – schränkt den eingebetteten Inhalt ein
• referrerpolicy – steuert übertragene Referrer-Informationen

Die früher häufig verwendeten Attribute frameborder, scrolling, marginwidth und marginheight sind veraltet. Die Darstellung wird heute mit CSS gesteuert.

Das embed-Element

<embed
  src="dokumente/anleitung.pdf"
  type="application/pdf"
  width="100%"
  height="600">
    

• src enthält den Pfad zur Datei.
• type gibt den MIME-Typ an.
• width und height bestimmen die Größe.

embed besitzt keinen eigenen alternativen Inhalt. Deshalb sollte zusätzlich ein direkter Link zur Datei angeboten werden.

Das object-Element

<object
  data="dokumente/anleitung.pdf"
  type="application/pdf"
  width="100%"
  height="600">

  <p>
    Das PDF kann nicht angezeigt werden.
    <a href="dokumente/anleitung.pdf">
      PDF herunterladen
    </a>
  </p>
</object>
    

• data enthält den Pfad zur Datei.
• type gibt den MIME-Typ an.
• width und height bestimmen die Größe.

Für PDF-Dateien ist ein normaler Download-Link häufig zuverlässiger. Für Videos, Audio und externe Webseiten sollten die dafür vorgesehenen HTML-Elemente verwendet werden.