Responsieve embed

Een responsieve insluiting is een [inbeddingscode](/glossary/embed-code)-snippet dat ingesloten content automatisch schaalt om te passen bij de breedte en hoogte van de bovenliggende container of het scherm van de bezoeker. In tegenstelling tot [iframes](/glossary/iframe) met vaste afmetingen die horizontale scrollbalken creëren of lege ruimte achterlaten, gebruiken responsieve insluitingen percentagegebaseerde breedtes en CSS aspect-ratio-technieken om de beschikbare ruimte vloeiend te vullen. De content behoudt zijn verhoudingen ongeacht of de container 1440 pixels breed is op een desktopmonitor of 375 pixels breed op een smartphone. Deze aanpak zorgt ervoor dat ingesloten flipbooks, documenten, video's of interactieve content correct worden weergegeven op alle apparaten zonder handmatig aanpassen of apparaatspecifieke code.

Lezers raadplegen content vanaf een breed scala aan apparaten en schermformaten. Als een ingesloten [flipbook](/glossary/flipbook) overloopt op mobiel, moeten lezers horizontaal scrollen — een sterk signaal dat de pagina niet geoptimaliseerd is. Als de insluiting piepklein verschijnt op een breedbeeldmonitor, wordt de content onleesbaar. Beide situaties verhogen de bouncerates en ondermijnen de geloofwaardigheid van de hostpagina. Responsieve insluitingen elimineren deze problemen en houden uw publicaties overal professioneel en toegankelijk. Ze beschermen ook de [Core Web Vitals](/glossary/core-web-vitals) van uw site door de juiste lay-outruimte te reserveren voordat de content laadt, waardoor [Cumulative Layout Shift](/glossary/cls) wordt voorkomen.

FlipLink genereert kant-en-klare responsieve inbeddingscodes voor elk gepubliceerd flipbook en document. U kopieert het snippet vanuit de deelopties van uw publicatie en plakt het in elke website, blog of CMS. De [iframe](/glossary/iframe) past zich automatisch aan de containerbreedte aan, en de flipbookviewer schaalt de pagina's dienovereenkomstig. De inbeddingscode bevat standaard [lazy loading](/glossary/lazy-loading), zodat het flipbook alleen laadt wanneer het in beeld scrollt, waardoor uw pagina snel blijft. U kunt ook de [Klikbare Afbeelding Insluiting](/features/clickable-image-embed) functie gebruiken om een miniatuur te plaatsen die bij een klik de volledige responsieve viewer opent — handig wanneer u een preview wilt tonen zonder direct de volledige viewer te laden.

Responsieve insluitingen werken doorgaans via een van twee CSS-technieken: - **Aspect-ratio container** — een wrapper-`div` met CSS-eigenschap `aspect-ratio` (bijv. `aspect-ratio: 16 / 9`) en `width: 100%`. De binnenste iframe is ingesteld om de wrapper volledig te vullen. Dit is de moderne aanpak en wordt ondersteund door alle huidige browsers. - **Padding-bottom hack** — een oudere techniek waarbij de wrapper `padding-bottom` als percentage gebruikt (bijv. `56.25%` voor 16:9) om de juiste hoogte ten opzichte van de breedte te creëren. De iframe wordt absoluut gepositioneerd binnenin. Deze methode wordt nog steeds veel gebruikt voor achterwaartse compatibiliteit. FlipLink's inbeddingscode gebruikt de aspect-ratio-aanpak met een fallback, wat compatibiliteit tussen browsers garandeert. De belangrijkste CSS-eigenschappen zijn `width: 100%`, `height: auto` en `border: none` op de iframe, gecombineerd met de beeldverhouding van de wrapper. Het resultaat is een insluiting die de volledige breedte van de container inneemt en de hoogte proportioneel schaalt.

- **Plaats de insluiting in een container met beperkte breedte** — als u de code in een sectie met volledige breedte plakt, zal het flipbook het volledige [viewport](/glossary/viewport) vullen. Gebruik een contentkolom of max-width wrapper om het op een comfortabele leesgrootte te houden. - **Vermijd het instellen van vaste pixelhoogtes** — dit ondermijnt het doel van responsieve insluiting. Laat de beeldverhouding de hoogte automatisch bepalen. - **Test op meerdere schermformaten** — bekijk uw pagina op desktop, tablet en telefoon om te bevestigen dat de insluiting correct schaalt. De apparaatsimulatie van Browser DevTools werkt goed voor snelle controles. - **Gebruik lazy loading voor insluitingen onder de vouw** — FlipLink's code bevat standaard lazy loading, maar als u de code aanpast, behoud dan het `loading="lazy"` attribuut om de initiële laadtijd niet te vertragen. - **Eén insluiting per viewportsectie** — meerdere flipbooks in één scrollweergave kan lezers overweldigen en de pagina vertragen. Spreid ze of gebruik een [klikbare afbeelding insluiting](/features/clickable-image-embed) zodat lezers kunnen kiezen welke publicatie ze willen openen.

1. **Publiceer het flipbook** — de inbeddingscode is pas beschikbaar na publicatie 2. **Kopieer de inbeddingscode** — ga naar de deelopties van uw publicatie en kopieer het responsieve snippet 3. **Plak in uw pagina** — voeg de code toe aan de HTML-editor van uw website, het CMS-embedblok of het pagebuilder-widget 4. **Controleer de containerbreedte** — zorg ervoor dat het bovenliggende element een gedefinieerde breedte heeft (percentage of max-width) zodat de insluiting weet hoe breed te renderen 5. **Preview op alle apparaten** — controleer desktop-, tablet- en mobiele weergaven om proportionele schaling te bevestigen 6. **Controleer paginasnelheid** — voer een Lighthouse-audit uit om te bevestigen dat de insluiting de laadtijd of layout shift scores niet negatief beïnvloedt 7. **Overweeg domeinwhitelisting** — gebruik [domeinwhitelisting](/glossary/domain-whitelisting) om te beperken welke websites uw publicaties mogen insluiten

Een responsieve insluiting garandeert dat uw flipbook er op elk scherm correct uitziet zonder handmatig aanpassen of apparaatspecifieke wijzigingen. Het is de eenvoudigste manier om interactieve publicaties op elke website te plaatsen met behoud van een professionele, snel ladende ervaring voor elke lezer.