Een YouTube video embedden klinkt simpel: kopieer een link, plak wat code, klaar. Maar er is een echt verschil tussen een embed die gewoon werkt en een embed die snel, responsive, privacyvriendelijk en op elk apparaat correct geformatteerd is. Deze gids behandelt dat allemaal op een plek.
Wat “embedden” eigenlijk betekent
Een video embedden betekent dat je hem rechtstreeks op je eigen webpagina toont via een <iframe>, in plaats van alleen naar YouTube door te linken. YouTube genereert voor elke video een speciale embed URL (in de vorm youtube.com/embed/VIDEO_ID), en die URL komt in het src attribuut van de iframe. De zichtbare YouTube.com pagina zelf, met reacties en aanbevelingen, kan niet op deze manier geframed worden. Alleen de speciale embed URL is daarvoor gebouwd.
De opbouw van een embed code
Een basale embed ziet er zo uit:
<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" title="YouTube video player" frameborder="0" allowfullscreen></iframe>Elk onderdeel telt mee. De width en height stellen een vast aantal pixels in, wat werkt maar zich niet aanpast aan verschillende schermformaten. De src URL bepaalt welke video afspeelt en welk domein dit afhandelt (een detail dat belangrijk is voor privacy, hieronder toegelicht). Het title attribuut is geen versiering: schermlezers lezen het voor, dus een generieke of ontbrekende titel is een echt toegankelijkheidsprobleem. allowfullscreen laat een bezoeker de speler vergroten, wat de meeste bezoekers verwachten van elke ingesloten video.
Responsive maken
Vaste pixelafmetingen zien er prima uit op het scherm waarop je hebt getest en breken op elk ander schermformaat. Een responsive embed wikkelt de iframe in plaats daarvan in een container die op elke breedte de juiste beeldverhouding aanhoudt:
<div style="position:relative;width:100%;padding-bottom:56.25%;height:0;overflow:hidden;">
<iframe src="https://www.youtube-nocookie.com/embed/VIDEO_ID" style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;" allowfullscreen></iframe>
</div>Het getal 56,25% is simpelweg de hoogte-breedteverhouding van 16:9 video uitgedrukt in procenten (9 gedeeld door 16 is 0,5625). Voor een verticale video in Shorts stijl met verhouding 9:16 is het equivalente getal 177,78% (16 gedeeld door 9). Deze “padding-bottom truc” werkt al meer dan tien jaar betrouwbaar in alle browsers, en daarom blijft het de meest gebruikte aanpak, al is de moderne CSS eigenschap aspect-ratio een geldig en eenvoudiger alternatief in browsers die dit ondersteunen.
Privacy: youtube.com versus youtube-nocookie.com
YouTube biedt twee domeinen voor embedden. Het standaard youtube.com domein gedraagt zich als de rest van YouTube en kan al trackingcookies plaatsen zodra de pagina laadt. Het youtube-nocookie.com domein is functioneel identiek, maar plaatst die cookies pas zodra een bezoeker daadwerkelijk met de speler interacteert, en dat is waarom dit domein de aanbevolen standaard is voor AVG bewuste sites. Overschakelen is net zo simpel als het domein in de embed URL wijzigen; al het andere aan de embed blijft hetzelfde.
Afspelen beheren
De embed URL accepteert een reeks queryparameters die het gedrag van de speler wijzigen:
- start en end (in seconden) beperken het afspelen tot een specifiek bereik.
- autoplay=1 start de video direct, al vereisen browsers over het algemeen dat mute=1 erbij staat, anders wordt autoplay geblokkeerd.
- loop=1, gecombineerd met een playlist parameter die op dezelfde video ID staat, herhaalt de video continu.
- controls=0 verbergt de bedieningsbalk van de speler, handig voor video op de achtergrond.
- rel=0 beperkt gerelateerde video suggesties na het afspelen tot video’s van hetzelfde kanaal.
Voor de volledige lijst met voorbeelden, zie ons overzicht van iframe parameters.
Snelheid: laat embeds je pagina niet vertragen
Een YouTube iframe is een relatief zwaar element om te laden: het haalt de eigen scripts van de speler en een voorbeeldminiatuur op, nog voordat iemand op afspelen drukt. Op een pagina met meerdere embeds kan het direct laden van allemaal de eerste paginalading merkbaar vertragen. Twee oplossingen pakken dit goed aan. Ten eerste, voeg het native loading="lazy" attribuut toe aan de iframe, zodat browsers het laden uitstellen tot het element in de buurt van de viewport scrollt. Ten tweede, overweeg voor pagina’s met veel video’s een “klik om te laden” patroon: toon eerst een lichte miniatuurafbeelding en voeg de echte iframe pas toe zodra een bezoeker erop klikt.
Speciale formaten: Shorts en afspeellijsten
Shorts worden technisch precies zo ingesloten als normale video’s, maar hebben een responsive 9:16 wrapper nodig in plaats van 16:9 om zwarte balken rond het verticale beeld te voorkomen. Afspeellijsten gebruiken een volledig ander embed pad, /embed/videoseries, gecombineerd met een list parameter die op de ID van de afspeellijst staat, en tonen volgende/vorige knoppen waarmee je door elke video in de afspeellijst kunt navigeren.
Waar de code daadwerkelijk moet komen
Zodra je je embed code hebt, moet die ergens komen waar de HTML van je site direct bewerkbaar is: een Custom HTML blok in de WordPress blokeditor, een rich-text of custom liquid sectie in Shopify, een embed widget in Wix, of rechtstreeks in de markup van een handmatig gecodeerde site. We behandelen de exacte stappen voor de meest gangbare platformen in aparte gidsen voor WordPress, Shopify en Wix.
Het bouwen zonder code te schrijven
Al het bovenstaande (responsive wrapping, het privacyvriendelijke domein, start- en eindtijden, autoplay, loop, verborgen bedieningselementen, formaat voor Shorts en afspeellijstmodus) wordt automatisch geregeld door onze gratis embed code generator. Plak een link, zet de gewenste opties aan en kopieer de kant-en-klare code. Alles draait volledig in je browser, dus er wordt niets over de video die je embedt naar onze servers gestuurd of daar opgeslagen.
Veelvoorkomende fouten om te vermijden
- De watch URL (youtube.com/watch?v=…) rechtstreeks in de src van een iframe plakken zonder deze eerst naar het /embed/ formaat om te zetten.
- autoplay=1 instellen zonder mute=1, wat de meeste browsers simpelweg negeren.
- Een beschrijvend title attribuut vergeten, wat de toegankelijkheid schaadt.
- Vaste width en height gebruiken op een pagina die ook goed op mobiel moet werken.
- Veel embeds tegelijk laden op een pagina zonder lazy loading, wat de paginasnelheid vertraagt.
Met deze basis heb je alles wat nodig is om YouTube video correct in te sluiten: snel, responsive, toegankelijk en privacybewust, of je de code nu met de hand bouwt of in een paar klikken genereert.