Implement lazy loading for videos
Senior SEO-specialist
Videos make your content richer, but they’re also heavy. Standard embeds load immediately upon page visit – which slows load time and negatively affects your Core Web Vitals. The solution: lazy loading. In this article, I’ll show you how to load videos only as soon as they come into view, without external plug-ins or performance issues.
1. Why lazy loading for video?
A standard YouTube or Vimeo embed automatically loads multiple external scripts, thumbnails and iframe resources upon page visit.
Disadvantages:
- Slow LCP (Largest Contentful Paint).
- Lower PageSpeed score
- Poorer mobile performance
- Unnecessary data consumption with videos at the bottom of the page
Lazy loading causes the video to load only when the visitor scrolls to it.
2. Operation: from image to iframe on scroll
The lazy load technique works as follows:
- You display a static thumbnail (e.g., JPG or WebP)
- When scrolling (via the Intersection Observer API) replace this thumbnail with the actual <iframe>
- Result: faster loading, no render-blocking scripts, better user experience
3. HTML + JavaScript example (YouTube)
HTML:
html
<div class="video-wrapper" data-video-id="dQw4w9WgXcQ">
<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 (optional):
css
.video-wrapper {
position: relative;
width: 100%;
aspect-ratio: 16/9;
background: #000;
cursor: pointer;
}
.video-wrapper img {
width: 100%;
display: block;
}
.play-button {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
font-size: 2rem;
background: none;
border: none;
color: white;
}
JavaScript (Intersection Observer):
html
<script>
document.addEventListener('DOMContentLoaded', function () {
const videos = document.querySelectorAll('.video-wrapper');
const loadIframe = (el) => {
const videoId = el.getAttribute('data-video-id');
const iframe = document.createElement('iframe');
iframe.setAttribute('src', 'https://www.youtube.com/embed/' + videoId + '?autoplay=1');
iframe.setAttribute('frameborder', '0');
iframe.setAttribute('allow', 'autoplay; encrypted-media');
iframe.setAttribute('allowfullscreen', '');
iframe.style.width = '100%';
iframe.style.height = '100%';
el.innerHTML = '';
el.appendChild(iframe);
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
loadIframe(entry.target);
observer.unobserve(entry.target);
}
});
});
videos.forEach(video => {
observer.observe(video);
});
});
</script>
Aan de slag met SEO? Neem gerust contact op.
4. Alternative: lazy loading with plugins (with CMS)
For WordPress sites:
- WP Rocket – Lazy load for images and videos
- Lazy Load for Videos – Specific plugin for video
- LiteSpeed Cache – All-in-one optimization, including video lazy loading
Note: visually check that embedded videos still load correctly after installation.
5. Additional optimization: compress thumbnails
Most video thumbnails are 480px or larger. Optimize them with:
- WebP format (smaller, same quality)
- Compression via Squoosh
- loading=”lazy” at <img>
Also, use an alt text for context + SEO.
In conclusion
Lazy loading for videos is a no-brainer: better load time, better UX, and better scores in Lighthouse/PageSpeed. Through a simple combination of HTML, CSS and JS, you load videos only when needed – and avoid unnecessary delays in initial visits.
