How to Use Lazy Loading for Background Videos in WordPress

Background videos can significantly enhance the visual appeal of your WordPress website. However, they often impact page load times, especially if they load immediately when the page opens. Lazy loading is a technique that delays the loading of videos until they are needed, improving site performance and user experience. In this article, we’ll explore how to implement lazy loading for background videos in WordPress.

Understanding Lazy Loading

Lazy loading defers the loading of non-essential resources, such as videos, images, or scripts, until they are about to enter the viewport. This reduces initial load time, decreases bandwidth usage, and enhances overall site speed. For background videos, lazy loading ensures that videos only load when the user scrolls to the relevant section.

Implementing Lazy Loading for Background Videos

There are several methods to add lazy loading to background videos in WordPress. Here, we focus on a simple approach using custom HTML, CSS, and JavaScript.

Step 1: Prepare Your Video

Choose a lightweight, optimized video format such as MP4. Upload your video to the WordPress media library and copy its URL.

Step 2: Add the Video with Lazy Loading Attributes

Insert the following code into a Custom HTML block in your post or page, replacing your-video-url.mp4 with your actual video URL.

<div class="lazy-background">
  <video class="lazy-video" data-src="your-video-url.mp4" muted loop playsinline>
    <source src="your-video-url.mp4" type="video/mp4">
    Your browser does not support the video tag.
  </video>
</div>

Adding CSS for Background Effect

Apply CSS to position the video as a background and hide controls. Add this CSS to your theme’s stylesheet or a Custom CSS block.

.lazy-background {
  position: relative;
  width: 100%;
  height: 400px; /* Adjust height as needed */
  overflow: hidden;
}
.lazy-background video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
}

Implementing Lazy Loading with JavaScript

Use JavaScript to load the video source when the element is near the viewport. Insert this script into your site, either via a plugin or in your theme’s footer.

document.addEventListener("DOMContentLoaded", function() {
  const lazyVideos = [].slice.call(document.querySelectorAll("video.lazy-video"));
  if ("IntersectionObserver" in window) {
    let lazyVideoObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          let video = entry.target;
          if (!video.src) {
            video.src = video.dataset.src;
            video.load();
          }
          video.play();
          observer.unobserve(video);
        }
      });
    });
    lazyVideos.forEach(function(video) {
      lazyVideoObserver.observe(video);
    });
  } else {
    // Fallback for browsers without IntersectionObserver
    lazyVideos.forEach(function(video) {
      video.src = video.dataset.src;
      video.load();
      video.play();
    });
  }
});

By following these steps, your background videos will load only when needed, improving your website’s performance and providing a smoother experience for visitors.

Table of Contents