Wat is een embedcode? Gids voor PDFs, flipbooks en video's

Wat is een embedcode?

Een embedcode is een stukje HTML dat externe content — een video, een PDF, een flipbook, een kaart, een tweet — binnen je eigen webpagina toont. Wanneer een lezer je pagina laadt, haalt de browser de externe content op en rendert deze inline, alsof het deel uitmaakt van je site.

De meest gebruikte onderliggende technologie is het HTML-element <iframe>, dat een aparte webpagina laadt binnen een rechthoekig kader op je pagina.

De basisstructuur van een embedcode

Een typische embedcode ziet er zo uit:

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

Elke embedcode bevat vier zaken:

• src — de URL van de content om in te sluiten.
• width en height — de afmetingen van het kader (in pixels of procenten).
• Permissie-attributen — allowfullscreen, allow="autoplay" of sandbox-vlaggen die de ingesloten content bepaalde browserfuncties laten gebruiken.
• Optionele styling — frameborder, style-attributen voor visuele afwerking.

Wanneer een lezer je pagina opent, ziet de browser de <iframe>-tag, vraagt de URL in src op en rendert de geretourneerde pagina binnen het kader.

Waar embedcodes vandaan komen

Elk platform dat embedding ondersteunt, genereert zijn eigen embedcode. Je kopieert hem van het platform en plakt hem in je site:

• YouTube / Vimeo — deelknop → Embed → kopieer iframe-code.
• Google Maps — Delen → Een kaart insluiten → kopieer het iframe.
• Twitter / X — Bericht → Dit bericht insluiten → kopiëren.
• FlipLink — elke publicatie genereert automatisch een embedcode, of gebruik de gratis embed-pdf tool voor eenmalige embeds zonder aanmelding.

Elk platform stemt de afmetingen, permissies en laadgedrag van het iframe af op zijn eigen content. Je hoeft de gegenereerde code zelden aan te passen — kopiëren, plakken, klaar.

Hoe verschilt een embedcode van een link?

Een link stuurt de lezer weg van je pagina naar de externe content. Een embedcode houdt ze op je pagina terwijl de externe content inline wordt getoond.

• Link: <a href="...">Bekijk video</a> — klik om de pagina te verlaten.
• Embed: <iframe src="..."> — content verschijnt inline, zonder navigatie.

Dit verschil is belangrijk voor bouncepercentage, lezer-engagement en analytics. Met een embed meet je weergaven zonder de bezoeker kwijt te raken aan een ander domein.

Een PDF insluiten: vier aanpakken

PDF-insluiten is verder geëvolueerd dan het basis-iframe. De vier aanpakken, in volgorde van eenvoud:

1. Native <embed> of <object> tag

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

Werkt in desktopbrowsers maar inconsistent op mobiel. Lezers zien de standaard PDF-viewer van de browser, die per apparaat varieert en interactiviteit verliest.

2. Google Docs Viewer iframe

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

Gratis, werkt op mobiel, maar beperkte controle over het uiterlijk van de viewer en geen analytics.

3. PDF.js-gebaseerde eigen viewer

Lever Mozilla's PDF.js-bibliotheek op je site en sluit een eigen viewer in. Volledige controle over branding en gedrag, maar vereist ontwikkelwerk en doorlopend onderhoud.

4. Flipbook-platform iframe (aanbevolen voor bedrijven)

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

Upload de PDF naar een flipbook-platform en kopieer de gegenereerde embedcode. Je krijgt klikbare links, pagina-omslag-animatie, analytics en leadcapture — geen eigen code, consistente mobiele ervaring. Zie hoe je een PDF insluit op je website voor een volledige uitleg per platform.

Embedcodes responsief maken

De standaard width="640" height="360" breekt op mobiel. Voor responsieve embeds verpak je het iframe in een container die de beeldverhouding behoudt:

<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>

De padding-bottom-waarde stelt de beeldverhouding in (141.4% = A4-staand; 56.25% = 16:9 video; 75% = 4:3).

Beveiliging: wat sandbox doet

Ingesloten content draait in de browser van de bezoeker, dus hij kan JavaScript uitvoeren, cookies voor zijn eigen domein lezen en zelfs de bovenliggende pagina navigeren. Het sandbox-attribuut beperkt wat de ingesloten content kan doen:

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

Veelvoorkomende vlaggen:

• allow-scripts — JavaScript toestaan
• allow-forms — formulierverzending toestaan
• allow-same-origin — content als first-party behandelen (nodig voor opgeslagen loginstatus)
• allow-popups — target="_blank"-links toestaan

Voor PDF-embeds is de standaard (geen sandbox) meestal prima, tenzij je niet-vertrouwde door gebruikers geüploade content insluit.

Veelgemaakte fouten bij embedcodes

• Vaste pixelbreedte. width="600" gebruiken breekt op smalle mobiele schermen. Gebruik width="100%" of de responsieve wrapper.
• Ontbrekende allowfullscreen. Gebruikers kunnen video- of flipbook-viewers niet op volledig scherm zetten.
• Iframes gestript door paginabouwers. Sommige CMS-editors (Squarespace Embed Block, WordPress zonder Custom HTML-blok) strippen iframe-tags. Plak embedcodes altijd in een "Code"- of "Custom HTML"-blok.
• Cross-origin fouten in de console. Sommige embeds vereisen specifieke CORS-headers van de bron; als de embed kapot lijkt, controleer de browserconsole.
• Kapotte preview in de pagina-editor. Veel CMS-editors renderen iframes niet in de bewerkmodus — controleer altijd op de gepubliceerde pagina, niet in preview.

Veelgestelde vragen

Is een iframe hetzelfde als een embedcode?

Een iframe is één type embedcode — de meest voorkomende. Embedcodes kunnen ook <embed>, <object>, <video> of platformspecifieke JavaScript-widgets gebruiken. Voor PDFs en flipbooks zijn iframes de standaard.

Vertraagt het insluiten van een PDF mijn website?

Het iframe laadt de PDF op aanvraag, dus het beïnvloedt paginaperformance alleen als de gebruiker ernaartoe scrollt. Gebruik loading="lazy" op het iframe om laden uit te stellen totdat de embed bijna in beeld is.

Kan ik het uiterlijk van ingesloten content aanpassen?

Je kunt het buitenste kader (grootte, rand, positie) met CSS op het iframe besturen. Het uiterlijk van de binnenkant hangt af van het platform dat de embedcode genereert. FlipLink laat je merkkleuren en eigen styling toepassen op de ingesloten viewer.

Werkt de embedcode op elke websitebouwer?

Elke site die het plakken van rauwe HTML ondersteunt (WordPress Custom HTML, Wix HTML-iframe, Squarespace Code Block, Webflow Embed, Shopify Custom Liquid, Notion /embed) accepteert iframe-embedcodes. Sommige bouwers hebben extra platformbeperkingen — zie onze embed-per-platform gids voor details.

Hoe krijg ik een embedcode voor mijn PDF?

Gebruik de gratis embed-pdf tool: upload een PDF en krijg in seconden een iframe-embedcode. Geen aanmelding nodig voor eenmalige embeds.

Gerelateerde artikelen

• Hoe sluit je een PDF in op een website: 5 methoden vergeleken
• Hoe voeg je een PDF toe aan een website, document of e-mail
• Hoe sluit je een flipbook in in Squarespace
• Hoe sluit je een flipbook in in Shopify
• Wat is een interactieve PDF?