Externe Inhalte mit <embed>, <object> und <iframe> richtig einbinden: HTML-Elemente im Vergleich

·

Sladjan Lazic

Ein Video direkt im Blog ansehen, eine PDF-Datei auf der Website lesen oder eine interaktive Karte nutzen: Eingebettete Inhalte ersparen Besuchern häufig den Wechsel auf eine andere Seite. HTML bietet dafür unter anderem die Elemente <embed>, <object> und <iframe>. Auf den ersten Blick erfüllen sie ähnliche Aufgaben. Doch ihre Unterschiede entscheiden darüber, wie flexibel, zugänglich und sicher eine Einbindung ist. In diesem Blogartikel erkläre ich die HTML-Elemente <embed>, <object> und <iframe>.

Drei Elemente, unterschiedliche Aufgaben

Alle drei Elemente können externe Inhalte in eine Webseite integrieren. Sie unterscheiden sich vor allem darin, welche Inhalte sie darstellen und welche Steuerungsmöglichkeiten sie bieten.

Das Element <embed> dient der direkten Einbindung einer Ressource, etwa einer PDF-Datei. Es bietet eine kompakte Syntax, aber keinen eigenen Ersatzinhalt. Mit <object> lassen sich Dokumente und andere unterstützte Ressourcen einbetten; zusätzlich kann es Ersatzinhalt enthalten. <iframe> eignet sich für eigenständige Webseiten, Karten und externe Player und bietet unter anderem eine Sandbox sowie verzögertes Laden.

Die Elemente gehören weiterhin zum HTML-Standard. Für gewöhnliche Bilder, Videos und Audiodateien sind jedoch die dafür vorgesehenen Elemente <img>, <video> und <audio> meist passender.

<embed>: Eine Ressource direkt anzeigen

Das Element <embed> bindet eine externe Ressource unmittelbar ein. Ein typisches Beispiel ist eine PDF-Datei:

<embed
  src="/dokumente/produktkatalog.pdf"
  type="application/pdf"
  width="100%"
  height="600"
  title="Produktkatalog als PDF"
>

Das Attribut src bezeichnet die Datei, type ihren MIME-Typ. Breite und Höhe bestimmen den vorgesehenen Darstellungsbereich. Als sogenanntes leeres Element besitzt <embed> keinen schließenden Tag.

Seine kompakte Schreibweise hat eine Einschränkung: Innerhalb des Elements lässt sich kein Ersatzinhalt unterbringen. Deshalb ist ein zusätzlicher Link zur Datei sinnvoll. Ob die Ressource direkt angezeigt werden kann, hängt vom Browser und seinen unterstützten Formaten ab.

<object>: Einbettung mit Ersatzinhalt

Mit <object> lässt sich ebenfalls eine externe Ressource anzeigen. Die Adresse steht hier im Attribut data. Zwischen öffnendem und schließendem Tag kann außerdem ein Ersatzinhalt stehen:

<object
  data="/dokumente/produktkatalog.pdf"
  type="application/pdf"
  width="100%"
  height="600"
>
 <p>
    Die PDF-Datei kann hier nicht angezeigt werden.
    <a href="/dokumente/produktkatalog.pdf">
      Produktkatalog öffnen
    </a>
  </p>
</object>

Kann der Browser die Ressource nicht darstellen, bietet dieser Ersatzinhalt einen anderen Zugang zum Dokument. Bei PDF-Dateien empfiehlt sich zusätzlich ein dauerhaft sichtbarer Link außerhalb der Einbettung: Eine technisch geladene Vorschau ist nicht automatisch auf jedem Gerät gut bedienbar.

<iframe>: Eine Webseite innerhalb der Webseite

Ein <iframe> erzeugt einen eigenen Bereich, in dem ein anderes HTML-Dokument geladen wird. Das eignet sich beispielsweise für interaktive Karten, externe Videoplayer oder eigenständige Anwendungen.

<iframe
  src="/interaktive-karte.html"
  title="Interaktive Karte unserer Standorte"
  width="800"
  height="450"
  loading="lazy"
></iframe>

Ein aussagekräftiger title hilft Menschen mit Screenreader, den Zweck des eingebetteten Bereichs zu erkennen. Mit loading="lazy" kann der Browser das Laden aufschieben, bis sich der Frame dem sichtbaren Bereich nähert. Das ist vor allem bei Einbettungen weiter unten auf einer Seite hilfreich.

Anders als bei einem gewöhnlichen Inhaltsblock lässt sich das eingebettete Dokument nicht einfach mit dem CSS der umgebenden Seite gestalten. Für das Design innerhalb des Frames ist grundsätzlich dessen eigenes Dokument verantwortlich.

Responsive Gestaltung: Der Rahmen muss mitwachsen

Feste Abmessungen können auf schmalen Displays zu Problemen führen. Für Einbettungen mit einem festen Seitenverhältnis lässt sich der verfügbare Platz über CSS anpassen:

.responsive-frame {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
}
<iframe
  class="responsive-frame"
  src="/praesentation.html"
  title="Interaktive Produktpräsentation"
  loading="lazy"
></iframe>

Dieses Muster passt beispielsweise zu Präsentationen und Videoplayern. Für längere Dokumente oder Formulare braucht es eine andere Höhenplanung. Die responsive Größe des Rahmens allein sorgt außerdem noch nicht dafür, dass dessen Inhalt auf Mobilgeräten gut funktioniert.

Sicherheit: Berechtigungen gezielt vergeben

Ein eingebetteter Inhalt kann eigene Skripte und Funktionen mitbringen. Für <iframe> bietet das Attribut sandbox zusätzliche Beschränkungen:

<iframe
  src="/vorschau.html"
  title="Vorschau eines Dokuments"
  sandbox
></iframe>

Eine Sandbox ohne weitere Freigaben schränkt beispielsweise Skripte, Formulare und Pop-ups ein. Benötigte Funktionen lassen sich gezielt erlauben. Solche Freigaben sollten zum tatsächlichen Inhalt passen, weil sie die Schutzwirkung beeinflussen.

Zusätzlich kann allow den Zugriff auf bestimmte Browserfunktionen steuern. Allerdings lässt sich nicht jede Website einbetten: Anbieter können dies über HTTP-Header wie Content-Security-Policy: frame-ancestors oder X-Frame-Options beschränken.

Bedienbarkeit und Ladezeit mitdenken

Eine Einbettung sollte auch dann einen brauchbaren Zugang bieten, wenn sie langsam lädt oder auf einem Gerät schlecht funktioniert. Ein sichtbarer Link zum Originalinhalt ist dafür häufig die einfachste Ergänzung.

Bei externen Diensten kommt hinzu, dass bereits beim Laden Verbindungen zum jeweiligen Anbieter entstehen können. Ob ein Inhalt sofort geladen oder zunächst durch eine Vorschau mit Aktivierungsschaltfläche ersetzt wird, sollte deshalb bewusst entschieden werden. loading="lazy" verschiebt das Laden, ersetzt aber keine solche Aktivierung.

Für die Gestaltung bedeutet das: ausreichend Platz reservieren, die Tastaturbedienung prüfen und Einbettungen auf kleinen Bildschirmen testen.

Welches Element passt zum Projekt?

Für eigenständige Webinhalte ist <iframe> meist die passende Wahl, weil es dafür ausgelegt ist und umfangreiche Steuerungsmöglichkeiten bietet. <object> ist interessant, wenn eine Ressource mit integriertem Ersatzinhalt eingebunden werden soll. <embed> eignet sich für eine einfache direkte Einbindung, bietet aber weniger Möglichkeiten für Ausweichlösungen.

Entscheidend ist die Erfahrung der Besucher: Sie sollten den Inhalt schnell erreichen, verstehen und zuverlässig bedienen können, auch dann, wenn die eingebettete Darstellung einmal nicht funktioniert.

Externe Inhalte richtig einbinden – Fazit

Die Wahl zwischen <embed>, <object> und <iframe> hängt vom Inhalt und den Anforderungen der Website ab. Während <embed> eine einfache Einbindung ermöglicht, bietet <object> Platz für Ersatzinhalte. <iframe> eignet sich besonders für eigenständige Webinhalte wie Karten oder externe Player. Unabhängig vom Element sollten responsive Darstellung, Barrierefreiheit, Ladezeiten und Sicherheit berücksichtigt werden. Eine gute Einbettung fügt sich ins Design ein und bleibt für Besucher zuverlässig bedienbar.

Sladjan Lazic
Latest posts by Sladjan Lazic (see all)

Das könnte dich auch interessieren

Comments

Schreiben Sie einen Kommentar

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