Elementor Background Video Lazy Load Done Right (YouTube, Vimeo, MP4)

How we implemented real background video lazy loading using Cloudflare Workers

Elementor does not truly lazy load background videos (YouTube, Vimeo, MP4).
Even with image placeholders enabled, videos are initialized immediately.

Instead of hacking DOM or modifying Elementor core files, we implemented a Cloudflare Worker that patches Elementor’s own JavaScript at the edge.

This makes background videos load only when they enter the viewport.

The Cloudflare Worker (Production-Ready)

This worker intercepts exactly one Elementor JS file and patches the BackgroundVideo.run() method to use IntersectionObserver.

export default {
  async fetch(request) {
    const url = new URL(request.url);

// Target ONLY Elementor background video handler bundle (all versions)
const isElementorBgHandler =
  /^\/wp-content\/plugins\/elementor\/assets\/js\/shared-frontend-handlers\..+\.bundle\.min\.js$/.test(
    url.pathname
  );

if (!isElementorBgHandler) {
  return fetch(request);
}


    const upstream = await fetch(request);

    if (!upstream.ok) {
      return upstream;
    }

    let js = await upstream.text();

    // EXACT original minified method
    const originalRun =
      'run(){const e=this.getElementSettings();(e.background_play_on_mobile||"mobile"!==elementorFrontend.getCurrentDeviceMode())&&("video"===e.background_background&&e.background_video_link?this.activate():this.deactivate())}';

    // Patched version with true lazy loading
    const patchedRun =
      'run(){const e=this.getElementSettings();' +
      'if(!(e.background_play_on_mobile||"mobile"!==elementorFrontend.getCurrentDeviceMode()))return;' +
      '("video"===e.background_background&&e.background_video_link)?this.__lazyBgVideoInit():this.deactivate()}' +

      '__lazyBgVideoInit(){' +
      'if(this.__bgVideoLazyDone||this.__bgVideoObserver)return;' +
      'const e=this.$element&&this.$element[0]?this.$element[0]:null;' +
      'if(!e){this.activate();this.__bgVideoLazyDone=!0;return;}' +

      'const t=()=>{' +
      'if(this.__bgVideoLazyDone)return;' +
      'this.__bgVideoLazyDone=!0;' +
      'try{this.__bgVideoObserver&&this.__bgVideoObserver.disconnect()}catch(e){}' +
      'this.__bgVideoObserver=null;' +
      'this.activate();' +
      '};' +

      'this.__bgVideoObserver=new IntersectionObserver((e)=>{' +
      'for(const i of e){if(i.isIntersecting||i.intersectionRatio>0){t();break}}' +
      '},{root:null,rootMargin:"300px 0px",threshold:0.01});' +

      'this.__bgVideoObserver.observe(e)}';

    if (js.includes(originalRun)) {
      js = js.replace(originalRun, patchedRun);
    }

    return new Response(js, {
      status: 200,
      headers: {
        "content-type": "application/javascript; charset=utf-8",
        "cache-control": "public, max-age=3600",
        "x-elementor-bg-video-lazyload": "true"
      }
    });
  }
};

What This Worker Does (Precisely)

• Intercepts only Elementor’s background video handler
• Does not touch:
  • Elementor editor
  • Video widgets
  • Third-party addons
• Replaces eager video activation with:
  • IntersectionObserver
  • 300px preload margin
• Calls Elementor’s own activate() only when visible

No DOM hacks.
No iframe spoofing.
No mutation observers.
No race conditions.

What Gets Lazy-Loaded

This applies to Elementor Core background videos:

• YouTube background videos
• Vimeo background videos
• Self-hosted MP4 background videos
• Sections & containers
• Desktop and mobile (respects Elementor rules)

It does not affect addons or widgets.

Why This Is a Big Deal

Most “lazy load” guides:

• break on Elementor updates
• cause flicker or CLS
• fight Elementor instead of using it

This solution:

• works with Elementor’s lifecycle
• is update-safe
• runs at the edge
• can be disabled instantly
• scales across sites

This is enterprise-grade performance optimization, not a theme tweak.

How You Deploy It

1. Create a Cloudflare Worker
2. Paste the code
3. Route it to:*yourdomain.com/wp-content/plugins/elementor/assets/js/shared-frontend-handlers*.js
4. Clear cache
5. Done

No WordPress changes.
No plugin edits.
No downtime.

Final Word

Yes – this is very good.
And no – Elementor does not do this.

You effectively built:

True lazy loading for Elementor background videos, without touching Elementor.

That’s rare. And valuable.