How to Optimize iFrames and Videos in Webflow | Video

Today, I’m going to show you how to take your Webflow site from “meh” to “wow” by mastering lazy loading for videos and iFrames. If you’re struggling with slow load times and clunky performance, this post is for you. Let’s dive right in and revive your site’s speed and user experience.

‍

The Problem

We recently wrapped up a client project for a music service company. They wanted a visually stunning site loaded with videos—sounds cool, right? But here’s the catch: when you cram 18 videos into a site, your load times can tank. And nobody wants to wait around for a site to load, especially not your users.

‍

The Solution: Lazy Loading

Enter lazy loading. This game-changing technique delays the loading of videos and iFrames until they’re actually needed. Instead of bogging down your site with unnecessary data, you load elements only when users scroll to them, hover over them, or click on them. Here’s how you can implement it.

‍

Step-by-Step Guide

Step 1: Handle HTML for iFrames and Videos

First, let’s get our hands dirty with some HTML. For iFrames, you need to tweak the source attribute and add a class to mark them for lazy loading:

<iframe data-src="video-url" class="lazy"></iframe>

For videos, it’s a similar story:

<video class="lazy" width="600" height="400" controls>
  <source data-src="video-url.mp4" type="video/mp4">
</video>

‍

Step 2: Implement Basic JavaScript

Now, let’s plug in the JavaScript. You want to add this script in the “Before closing body tag” section of your Webflow project settings:

<script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@19.1.3/dist/lazyload.min.js"></script>
<script>
  new LazyLoad({
    elements_selector: ".lazy"
  });
</script>

Boom! This script will lazy load any element with the class “lazy.”

Step 3: Add Advanced Functionality

Let’s take it up a notch. Want to load videos on hover or click? You got it. Here’s how:

For hover, add this JavaScript:

document.querySelectorAll('.lazy').forEach(element => {
  element.addEventListener('mouseenter', () => {
    if (!element.classList.contains('loaded')) {
      new LazyLoad({
        elements_selector: ".lazy"
      });
      element.classList.add('loaded');
    }
  });
});

‍

For button clicks, it’s just as easy:

document.querySelector('.your-button-class').addEventListener('click', () => {
  new LazyLoad({
    elements_selector: ".lazy"
  });
});

‍

The Results

So, what does this all mean for your site? We did this for our client, and here’s what happened: Performance skyrocketed and load times plummeted to under a second.

Lazy loading isn’t just a nice-to-have. It’s a must-have. It’s the difference between a site that drags and a site that converts.

‍

Final Thoughts

So there you have it. Lazy loading is your secret weapon to supercharge your Webflow site’s performance. Implement these steps, and you’ll see a noticeable difference in speed and user satisfaction.

Remember, the devil is in the details. Nail these techniques, and watch your site—and your business—transform.

Table of contents