Was ist ein Embed-Code? Guide für PDFs, Flipbooks, Videos

Was ist ein Embed-Code?

Ein Embed-Code ist ein HTML-Snippet, das externe Inhalte — ein Video, ein PDF, ein Flipbook, eine Karte, einen Tweet — direkt auf deiner Webseite anzeigt. Wenn jemand deine Seite lädt, holt der Browser den externen Inhalt und rendert ihn inline, als wäre er Teil deiner Seite.

Die häufigste zugrundeliegende Technologie ist das HTML-Element <iframe>, das eine separate Webseite in einem rechteckigen Rahmen auf deiner Seite lädt.

Die Grundstruktur eines Embed-Codes

Ein typischer Embed-Code sieht so aus:

<iframe
  src="https://example.com/your-content"
  width="100%"
  height="600"
  allowfullscreen
  frameborder="0"
></iframe>

Jeder Embed-Code enthält vier Dinge:

• src — die URL des einzubettenden Inhalts.
• width und height — die Abmessungen des Rahmens (in Pixeln oder Prozent).
• Berechtigungsattribute — allowfullscreen, allow="autoplay" oder sandbox-Flags, die dem eingebetteten Inhalt bestimmte Browser-Funktionen erlauben.
• Optionales Styling — frameborder, style-Attribute für visuelle Feinheiten.

Wenn jemand deine Seite öffnet, sieht der Browser das <iframe>-Tag, fordert die URL in src an und rendert die zurückgegebene Seite im Rahmen.

Woher Embed-Codes kommen

Jede Plattform, die Einbettung unterstützt, generiert ihren eigenen Embed-Code. Du kopierst ihn dort und fügst ihn auf deiner Seite ein:

• YouTube / Vimeo — Teilen → Einbetten → iframe-Code kopieren.
• Google Maps — Teilen → Karte einbetten → iframe kopieren.
• Twitter / X — Beitrag → Diesen Beitrag einbetten → kopieren.
• FlipLink — jede Publikation erzeugt automatisch einen Embed-Code, oder du nutzt das kostenlose embed-pdf-Tool für einmalige Einbettungen ohne Anmeldung.

Jede Plattform stimmt Abmessungen, Berechtigungen und Ladeverhalten des iframes auf ihre Inhalte ab. Du musst den generierten Code selten anpassen — kopieren, einfügen, fertig.

Wie unterscheidet sich ein Embed-Code von einem Link?

Ein Link schickt die Lesenden von deiner Seite weg zum externen Inhalt. Ein Embed-Code behält sie auf deiner Seite und zeigt den externen Inhalt inline.

• Link: <a href="...">Video ansehen</a> — Klick verlässt die Seite.
• Embed: <iframe src="..."> — Inhalt erscheint inline, keine Navigation.

Dieser Unterschied ist wichtig für Absprungrate, Leser-Engagement und Analytics. Ein Embed lässt dich Aufrufe messen, ohne die Besuchenden an eine andere Domain zu verlieren.

Ein PDF einbetten: vier Ansätze

PDF-Einbettung hat sich über das einfache iframe hinaus entwickelt. Die vier Ansätze, sortiert nach Einfachheit:

1. Natives <embed>- oder <object>-Tag

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

Funktioniert in Desktop-Browsern, aber uneinheitlich auf Mobilgeräten. Lesende sehen den Standard-PDF-Viewer des Browsers, der je nach Gerät variiert und jede Interaktivität verliert.

2. Google Docs Viewer iframe

<iframe src="https://docs.google.com/viewer?url=YOUR_PDF_URL&embedded=true" width="100%" height="600"></iframe>

Kostenlos, funktioniert mobil, aber begrenzte Kontrolle über Viewer-Aussehen und keine Analytics.

3. Benutzerdefinierter PDF.js-Viewer

Die PDF.js-Bibliothek von Mozilla auf deiner Seite ausliefern und einen individuellen Viewer einbetten. Volle Kontrolle über Branding und Verhalten, aber Entwicklungsaufwand und laufende Wartung.

4. Flipbook-Plattform-iframe (empfohlen für Unternehmen)

<iframe src="https://your-flipbook-url" width="100%" height="600" allowfullscreen></iframe>

PDF zu einer Flipbook-Plattform hochladen, generierten Embed-Code kopieren. Du bekommst klickbare Links, Blätteranimation, Analytics und Lead-Erfassung — kein Custom Code, konsistente Mobile-Experience. Siehe wie du ein PDF auf deiner Website einbettest für eine vollständige Anleitung pro Plattform.

Embed-Codes responsiv machen

Das Standard width="640" height="360" bricht auf Mobilgeräten. Für responsive Embeds umschließt du das iframe mit einem Container, der das Seitenverhältnis bewahrt:

<div style="position:relative; padding-bottom:141.4%; height:0;">
  <iframe
    src="..."
    style="position:absolute; top:0; left:0; width:100%; height:100%;"
    frameborder="0"
    allowfullscreen
  ></iframe>
</div>

Der padding-bottom-Wert legt das Seitenverhältnis fest (141,4 % = A4 hoch; 56,25 % = 16:9 Video; 75 % = 4:3).

Sicherheit: Was sandbox bewirkt

Eingebetteter Inhalt läuft im Browser der Besuchenden, kann also JavaScript ausführen, Cookies der eigenen Domain lesen und sogar die übergeordnete Seite navigieren. Das sandbox-Attribut schränkt ein, was der eingebettete Inhalt darf:

<iframe src="..." sandbox="allow-scripts allow-same-origin allow-forms"></iframe>

Gängige Flags:

• allow-scripts — JavaScript-Ausführung erlauben
• allow-forms — Formularversand erlauben
• allow-same-origin — Inhalt als First-Party behandeln (nötig für gespeicherten Login-Status)
• allow-popups — target="_blank"-Links erlauben

Für PDF-Embeds ist der Standard (ohne Sandbox) meist in Ordnung, es sei denn, du bettest nicht vertrauenswürdige nutzergenerierte Inhalte ein.

Häufige Fehler mit Embed-Codes

• Feste Pixel-Breite. width="600" bricht auf schmalen Handy-Screens. Nutze width="100%" oder den responsiven Wrapper.
• Fehlendes allowfullscreen. Nutzende können Video- oder Flipbook-Viewer nicht auf Vollbild erweitern.
• Von Page-Buildern entfernte iframes. Einige CMS-Editoren (Squarespace Embed Block, WordPress ohne Custom-HTML-Block) entfernen iframe-Tags. Füge Embed-Codes immer in einen "Code"- oder "Custom HTML"-Block ein.
• Cross-Origin-Fehler in der Konsole. Manche Embeds brauchen spezifische CORS-Header von der Quelle; wenn der Embed kaputt aussieht, prüfe die Browser-Konsole.
• Kaputte Vorschau im Page-Editor. Viele CMS-Editoren rendern iframes nicht im Bearbeitungsmodus — prüfe immer auf der veröffentlichten Seite, nicht in der Vorschau.

Häufig gestellte Fragen

Ist ein iframe dasselbe wie ein Embed-Code?

Ein iframe ist eine Art Embed-Code — die häufigste. Embed-Codes können auch <embed>, <object>, <video> oder plattformspezifische JavaScript-Widgets verwenden. Für PDFs und Flipbooks sind iframes der Standard.

Verlangsamt das Einbetten eines PDFs meine Website?

Das iframe lädt das PDF on demand, es wirkt sich also nur auf die Seitenperformance aus, wenn Nutzende dorthin scrollen. Setze loading="lazy" am iframe, um das Laden zu verzögern, bis der Embed nahe dem Viewport ist.

Kann ich das Aussehen eingebetteter Inhalte anpassen?

Den äußeren Rahmen (Größe, Rand, Position) kontrollierst du per CSS am iframe. Das Aussehen des inneren Inhalts hängt von der Plattform ab, die den Embed-Code erzeugt. FlipLink erlaubt es dir, Markenfarben und individuelles Styling auf den eingebetteten Viewer anzuwenden.

Funktioniert der Embed-Code auf jedem Website-Baukasten?

Jede Seite, die das Einfügen von rohem HTML erlaubt (WordPress Custom HTML, Wix HTML-iframe, Squarespace Code Block, Webflow Embed, Shopify Custom Liquid, Notion /embed), akzeptiert iframe-Embed-Codes. Einige Baukästen haben zusätzliche Plattform-Beschränkungen — siehe unseren Embed-Plattform-Guide für Details.

Wie bekomme ich einen Embed-Code für mein PDF?

Nutze das kostenlose embed-pdf-Tool: PDF hochladen, in Sekunden einen iframe-Embed-Code erhalten. Keine Anmeldung für einmalige Embeds.

Weiterführende Artikel

• Wie du ein PDF auf einer Website einbettest: 5 Methoden im Vergleich
• Wie du ein PDF in Website, Dokument oder E-Mail einfügst
• Wie du ein Flipbook in Squarespace einbettest
• Wie du ein Flipbook in Shopify einbettest
• Was ist ein interaktives PDF?