Video lazy load – background

March 22, 2024

I wanna use video as a background on my website. I have this:

<video autoplay muted loop preload="none" poster="{{ asset('img/web/intro_video_placeholder.webp') }}" loading="lazy">
 <source src="{{ asset('img/web/video/intro_video.webm') }}" type="video/webm">
</video>

It works fine, but what i wanna achieve is lazy load. I wanna load css nad js first and then start with video loading and also, if video is loaded, i wanna play it automatically.

With code above is not working properly and its blocking my css and js on slow internet connection (video has around 9MB).

Is there any solution? Thanks a lot.

>Solution :

your code looks fine. But a small change. The preload attribute is ignored if autoplay is present.

document.addEventListener("DOMContentLoaded", function() {
    var lazyVideo = document.getElementById('lazyVideo');
    // Function to play the video 

  });

<video id="lazyVideo" muted loop preload="none" poster="{{ asset('img/web/intro_video_placeholder.webp') }}" loading="lazy">
 <source src="{{ asset('img/web/video/intro_video.webm') }}" type="video/webm">
</video>