Lazy loading voor video's implementeren.
Lazy loading voor video's: vervang directe iframe-embeds door thumbnail + Intersection Observer. Volledig HTML/CSS/JS voorbeeld, performance-impact en CMS-plugin alternatieven.
01 — waaromWaarom lazy loading voor video? De voor/na vergelijking
Een standaard YouTube- of Vimeo-embed laadt automatisch meerdere externe scripts, thumbnails en iframe-resources bij elke paginabezoek. Op pagina's met video's onderaan = nodeloos zware initial-load. De oplossing: thumbnail tonen, iframe pas laden bij scroll-in-view. Hieronder de performance-impact in cijfers. Voor breder context op image-versie zie lazy loading voor afbeeldingen.
Bonus: omdat de YouTube iframe pas wordt geladen na een user-interactie of scroll, worden ook YouTube/Google cookies pas dan geplaatst. Dat is een privacy-verbetering die meteen ook GDPR-compliance vereenvoudigt.
02 — codeVolledige HTML/CSS/JS implementatie (YouTube)
Hieronder een werkende, dependency-vrije implementatie. Werkt met de native Intersection Observer API (alle moderne browsers). Voor Vimeo: vervang YouTube-URL door player.vimeo.com/video/....
HTML — placeholder met thumbnail:
<img src="https://img.youtube.com/vi/dQw4w9WgXcQ/hqdefault.jpg"
alt="Video preview" loading="lazy">
<button class="play-button" aria-label="Video afspelen">▶</button>
</div>
CSS — 16:9 wrapper met centered play-button:
position: relative;
aspect-ratio: 16/9;
background: #000;
cursor: pointer;
}
.play-button {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
background: #ff0000;
}
JavaScript — Intersection Observer, vervangt placeholder bij scroll:
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
const id = entry.target.getAttribute('data-video-id');
entry.target.innerHTML = `<iframe src="https://www.youtube.com/embed/${id}"></iframe>`;
observer.unobserve(entry.target);
}
});
});
wrappers.forEach((w) => observer.observe(w));
03 — pluginsCMS-plugin alternatieven (zonder code)
Voor WordPress, Shopify of andere CMS-systemen zijn er kant-en-klare plugins die hetzelfde resultaat opleveren zonder custom code. Hieronder mijn voorkeuren per platform.
04 — faqVeelgestelde vragen
Video-performance audit voor jouw site?
Volledige audit van embedded media impact, implementatie van lazy loading voor video én images, plus YouTube/Vimeo embed-strategie review. Inclusief Core Web Vitals-monitoring vóór en na deployment.
Plan een gesprek met Ralf →