.avif)
July 1, 2025
Videos can be a powerful part of your website — they capture attention, tell stories, and increase engagement. But if you’ve ever embedded a YouTube or Vimeo video in Webflow, you’ve probably noticed something frustrating: your page speed drops.
That’s where lazy loading comes in. It’s a simple technique that helps videos load only when needed, keeping your website fast and your core web metrics happy.
In this post, I’ll show you how I lazily load videos in Webflow without sacrificing performance or user experience.
When you embed a video directly into a page using an <iframe>, the browser loads:
All of this happens before the user even views the video, slowing down the initial load.
Lazy loading avoids this by delaying the video loading until:
This means:
One of the most effective ways to lazy load a video is to replace the iframe with a thumbnail and load the actual video with just a click.
Step 1: Embed HTML block
html
Copy
Edit
<div class="video-wrapper" onclick="loadVideo(this)">
<img src="https://img.youtube.com/vi/VIDEO_ID/hqdefault.jpg" alt="Video thumbnail" />
<div class="play-button"></div>
</div>
Step 2: Custom script (in the footer)
html
Copy
Edit
<script>
function loadVideo(container) {
const videoId = "VIDEO_ID"; // Replace with your actual video ID
container.innerHTML = `
<iframe src="https://www.youtube.com/embed/${videoId}?autoplay=1"
frameborder="0"
allow="autoplay; encrypted-media"
allowfullscreen>
</iframe>`;
}
</script>
Use a high-resolution thumbnail and preload it for a smoother UX.
This method automatically loads videos only when they enter the viewport.
Wrap your video in a div with the data-src attribute
When the user scrolls to it, JavaScript injects an iframe
Step 1: HTML Embed Block in Webflow
html
Copy
Edit
<div class="lazy-video" data-src="https://www.youtube.com/embed/VIDEO_ID"></div>src="https://www.youtube.com/embed/VIDEO_ID"></div>
Step 2: Script (before the </body> tag)
html
Copy
Edit
<script>
const lazyVideos = document.querySelectorAll(".lazy-video");
const observer = new IntersectionObserver((entries, obs) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const div = entry.target;
const iframe = document.createElement("iframe");
iframe.src = div.dataset.src;
iframe.setAttribute("frameborder", "0");
iframe.setAttribute("allowfullscreen", "");
iframe.setAttribute("allow", "autoplay; encrypted-media");
div.appendChild(iframe);
obs.unobserve(div);
}
});
});
lazyVideos.forEach(video => observer.observe(video));
</script>
This method is best when you want autoplay on scrolling or there is no manual play button.
When you dynamically load an iframe, it can shift other content — which hurts your CLS (Cumulative Layout Shift) score.
Use a container with a fixed aspect ratio to “reserve” space for the video:
css
Copy
Edit
.video-wrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 aspect ratio */
height: 0;
overflow: hidden;
}
.video-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
This ensures that the layout remains stable while the video loads.
Lazy loading videos in Webflow is one of the easiest ways to:
Whether you’re showcasing a product demo or a background video hero section, using one of the methods above will help you bring your designs to life without sacrificing speed.