YouTube iFrames load multiple heavy scripts:

• YouTube player JS
• Tracking scripts
• High-resolution thumbnails
• Media preloading

Lazy loading helps:

• Increase Google PageSpeed score
• Reduce initial page load time
• Improve Core Web Vitals (Largest Contentful Paint)
• Delay video scripts until needed

YouTube videos are one of the biggest performance killers — lazy load fixes that.

Step-by-Step:

1. Edit page with Elementor
2. Add the Video Widget
3. Scroll down to Additional Options
4. Enable Image Overlay

When the image overlay is enabled, Elementor automatically lazy loads the video iFrame.

Recommended Settings:

• Use optimized thumbnail image
• Add play button overlay
• Disable YouTube related videos
• Disable autoplay if not needed

This speeds up pages drastically.

Steps:

1. Install WP Rocket
2. Go to WP Rocket → Media
3. Enable:
   • LazyLoad for iFrames
   • Replace YouTube iFrame with Preview Image

WP Rocket replaces iframes with a light, clickable preview image — fastest possible solution.

Bonus Features:

• Delay YouTube scripts
• Delay JavaScript execution
• Remove unused CSS

Perfect for media-heavy websites.

Go to LiteSpeed Cache → Page Optimization → Media.

Enable:

• Lazy Load Images
• Lazy Load Iframes
• Lazy Load Inline Background Images

Litespeed automatically lazy loads YouTube, Vimeo & iframe-based embeds.

WP YouTube Lyte replaces the full video embed with a super-light clickable preview.

Steps:

1. Install WP YouTube Lyte
2. Go to Settings → WP YouTube Lyte
3. Enable:
   • Lazy Load Videos
   • Cache Thumbnails

Videos load only when the user clicks.

This method replaces YouTube iframe with a preview image and loads video on click.

Add this HTML:

Add this CSS:

.lazy-video {
  position: relative;
  cursor: pointer;
  background-size: cover;
  background-position: center;
}
.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Add this JS:

document.addEventListener("DOMContentLoaded", function() {
  var videos = document.querySelectorAll(".lazy-video");
  videos.forEach(function(video) {
    var image = new Image();
    image.src = "https://img.youtube.com/vi/" + video.dataset.embed + "/hqdefault.jpg";
    image.addEventListener("load", function() {
      video.appendChild(image);
    });
    video.addEventListener("click", function() {
      var iframe = document.createElement("iframe");
      iframe.setAttribute("src", "https://www.youtube.com/embed/" + video.dataset.embed + "?autoplay=1");
      iframe.setAttribute("frameborder", "0");
      iframe.setAttribute("allowfullscreen", "1");
      this.innerHTML = "";
      this.appendChild(iframe);
    });
  });
});

This is the fastest lazy load method for YouTube embeds.

Self-hosted videos can be lazy loaded using a preview image & click-to-load technique.

Basic HTML for lazy loading:

Use preload=”none” to prevent auto-downloading the video.

Methods:

• Enable lazyload in Elementor video widget
• WP Rocket lazy load iframes
• LiteSpeed lazy load iFrames
• Custom JS lazy load

Vimeo loads more scripts than YouTube — lazy loading is essential.

• Use compressed thumbnails (20–40 KB)
• Limit number of embedded videos per page
• Enable “delay JS” for YouTube scripts
• Use image overlays for Elementor
• Avoid autoplay videos (affects LCP & CLS)
• Use shortcodes instead of iFrames when possible