Responsives Embed

Ein responsives Embed ist ein [Einbettungscode](/glossary/embed-code)-Snippet, das eingebettete Inhalte automatisch an die Breite und Höhe des übergeordneten Containers oder des Bildschirms skaliert. Im Gegensatz zu [Iframes](/glossary/iframe) mit festen Abmessungen, die horizontale Scrollbalken erzeugen oder leere Flächen hinterlassen, verwenden responsive Embeds prozentuale Breiten und CSS-Aspect-Ratio-Techniken, um den verfügbaren Platz fließend auszufüllen. Der Inhalt behält seine Proportionen, unabhängig davon, ob der Container 1440 Pixel breit auf einem Desktop-Monitor oder 375 Pixel breit auf einem Smartphone ist. Dieser Ansatz stellt sicher, dass eingebettete Flipbooks, Dokumente, Videos oder interaktive Inhalte auf allen Geräten korrekt dargestellt werden, ohne manuelles Anpassen oder gerätespezifischen Code.

Leser greifen von einer Vielzahl von Geräten und Bildschirmgrößen auf Inhalte zu. Wenn ein eingebettetes [Flipbook](/glossary/flipbook) auf dem Handy überläuft, müssen Leser horizontal scrollen — ein deutliches Zeichen dafür, dass die Seite nicht optimiert ist. Erscheint das Embed winzig auf einem Breitbildmonitor, wird der Inhalt unlesbar. Beide Situationen erhöhen die Absprungrate und untergraben die Glaubwürdigkeit der Host-Seite. Responsive Embeds beseitigen diese Probleme und halten deine Publikationen überall professionell und zugänglich. Sie schützen auch die [Core Web Vitals](/glossary/core-web-vitals) deiner Website, indem sie den korrekten Layout-Platz reservieren, bevor der Inhalt geladen wird, und so [Cumulative Layout Shift](/glossary/cls) verhindern.

FlipLink generiert gebrauchsfertige responsive Einbettungscodes für jedes veröffentlichte Flipbook und Dokument. Du kopierst den Code aus den Freigabeoptionen deiner Publikation und fügst ihn in jede Website, jeden Blog oder jedes CMS ein. Der [Iframe](/glossary/iframe) passt sich automatisch an die Container-Breite an, und der Flipbook-Viewer skaliert die Seiten entsprechend. Der Einbettungscode enthält standardmäßig [Lazy Loading](/glossary/lazy-loading), sodass das Flipbook erst geladen wird, wenn es in den sichtbaren Bereich scrollt, was die Seite schnell hält. Du kannst auch die Funktion [Klickbares Bild-Embed](/features/clickable-image-embed) verwenden, um ein Vorschaubild zu platzieren, das bei Klick den vollen responsiven Viewer öffnet — nützlich, wenn du eine Vorschau zeigen möchtest, ohne sofort den vollständigen Viewer zu laden.

Responsive Embeds funktionieren typischerweise über eine von zwei CSS-Techniken: - **Aspect-Ratio-Container** — ein Wrapper-`div` mit CSS-Eigenschaft `aspect-ratio` (z.B. `aspect-ratio: 16 / 9`) und `width: 100%`. Der innere Iframe ist so eingestellt, dass er den Wrapper vollständig ausfüllt. Dies ist der moderne Ansatz und wird von allen aktuellen Browsern unterstützt. - **Padding-Bottom-Hack** — eine ältere Technik, bei der der Wrapper `padding-bottom` als Prozentsatz verwendet (z.B. `56.25%` für 16:9), um die korrekte Höhe relativ zur Breite zu erzeugen. Der Iframe wird absolut innerhalb positioniert. Diese Methode wird noch häufig für Abwärtskompatibilität verwendet. FlipLinks Einbettungscode verwendet den Aspect-Ratio-Ansatz mit einem Fallback, um Browser-übergreifende Kompatibilität sicherzustellen. Die wichtigsten CSS-Eigenschaften sind `width: 100%`, `height: auto` und `border: none` am Iframe, kombiniert mit dem Aspect Ratio des Wrappers. Das Ergebnis ist ein Embed, das die volle Breite des Containers einnimmt und seine Höhe proportional skaliert.

- **Embed in einem breitenbegrenzten Container platzieren** — wenn du den Code in einen Vollbreiten-Bereich einfügst, wird das Flipbook den gesamten [Viewport](/glossary/viewport) ausfüllen. Verwende eine Inhaltsspalte oder einen Max-Width-Wrapper für eine komfortable Lesegröße. - **Keine festen Pixel-Höhen setzen** — das macht den Zweck des responsiven Embeddings zunichte. Lass das Aspect Ratio die Höhe automatisch steuern. - **Auf mehreren Bildschirmgrößen testen** — überprüfe deine Seite auf Desktop, Tablet und Smartphone, um zu bestätigen, dass das Embed korrekt skaliert. Die Gerätesimulation der Browser-DevTools eignet sich gut für schnelle Überprüfungen. - **Lazy Loading für Embeds unterhalb des sichtbaren Bereichs verwenden** — FlipLinks Code enthält standardmäßig Lazy Loading, aber wenn du den Code anpasst, behalte das Attribut `loading="lazy"` bei, um die initiale Ladezeit nicht zu verlangsamen. - **Ein Embed pro Viewport-Abschnitt** — mehrere Flipbooks in einer einzelnen Scroll-Ansicht können Leser überfordern und die Seite verlangsamen. Verteile sie oder nutze ein [klickbares Bild-Embed](/features/clickable-image-embed), damit Leser wählen können, welche Publikation sie öffnen möchten.

1. **Flipbook veröffentlichen** — der Einbettungscode ist erst nach der Veröffentlichung verfügbar 2. **Einbettungscode kopieren** — zu den Freigabeoptionen der Publikation gehen und den responsiven Snippet kopieren 3. **In die Seite einfügen** — den Code im HTML-Editor der Website, im CMS-Embed-Block oder im Page-Builder-Widget hinzufügen 4. **Container-Breite überprüfen** — sicherstellen, dass das Elternelement eine definierte Breite hat (Prozent oder Max-Width), damit das Embed weiß, wie breit es rendern soll 5. **Auf allen Geräten in der Vorschau prüfen** — Desktop-, Tablet- und Mobilansichten überprüfen, um proportionale Skalierung zu bestätigen 6. **Seitengeschwindigkeit prüfen** — ein Lighthouse-Audit durchführen, um zu bestätigen, dass das Embed die Ladezeit oder Layout-Shift-Werte nicht negativ beeinflusst 7. **Domain-Whitelisting in Betracht ziehen** — [Domain-Whitelisting](/glossary/domain-whitelisting) verwenden, um einzuschränken, welche Websites deine Publikationen einbetten dürfen

Ein responsives Embed stellt sicher, dass dein Flipbook auf jedem Bildschirm korrekt aussieht, ohne manuelles Sizing oder gerätespezifische Anpassungen. Es ist der einfachste Weg, interaktive Publikationen auf jeder Website zu platzieren und dabei ein professionelles, schnell ladendes Erlebnis für jeden Leser zu gewährleisten.