Smart Background Video

LazyLoad, Adaptivity, and Autoplay Fix

Video

CSS

Safari Fix

This snippet solves three major problems with background videos on websites:

Basic CSS

This code is responsible for the correct positioning of the layers. The video tag is at the very bottom (z-index: -4), and the hack-div is on top of it (z-index: -3).

css

.lazy-video-bg {
    position: absolute; /* Or relative if the block should stretch the content */
    top: 0; left: 0; 
    width: 100%; height: 100%;
    overflow: hidden; 
    z-index: -1;
    background-color: #000;/* Placeholder color before video loads */
}

/* Layer 1: The video itself (bottom) */
.lazy-video-bg .full-bg-video {
    position: absolute; top: 0; left: 0; 
    width: 100%; height: 100%;
    object-fit: cover; 
    z-index: -4;
}

/* Layer 2: Safari Hack (on top of video) */
.lazy-video-bg .bg-video-hack {
    position: absolute; top: 0; left: 0; 
    width: 100%; height: 100%;
    z-index: -3; 
    pointer-events: none; 
    background-size: cover; 
    background-repeat: no-repeat; 
    background-position: center;
    background-color: transparent;
}

HTML code (how to use)

Paste this HTML code where the video should be. The script will automatically find everything using the lazy-video-bg class.

Option A: Same video for PC and Mobile

If the video is universal, fill in only the _desk attributes. The script will automatically insert them for mobile devices.

HTML

<div class="lazy-video-bg" 
    data-poster-desk="/path/to/poster.avif" 
    data-webm-desk="/path/to/video.webm" 
    data-mp4-desk="/path/to/video.mp4">
</div>

Option B: Different videos (Horizontal + Vertical)

If you need a separate (vertical) video for your phone.

HTML

<div class="lazy-video-bg"
     <!-- For computers (>720px) -->
     data-poster-desk="/path/to/desktop-poster.avif"
     data-webm-desk="/path/to/desktop-video.webm"
     data-mp4-desk="/path/to/desktop-video.mp4"
     
     <!-- For phones (

Note: The webm fields are optional. mp4 is required for iPhone use.

JavaScript

Insert this script once before the closing <body> tag or in the site's global JS file.

Settings inside the code:

t=720 is the screen width at which the mobile version of the video is enabled.
s="200px" — how many pixels before the block appears to start loading the video.

JavaScript

// [leggo.dev] Background Video LazyLoad
document.addEventListener("DOMContentLoaded",()=>{const e=".lazy-video-bg",t=720,s="200px",a=e=>{if(e.classList.contains("loaded"))return;const s=e.dataset,a=window.innerWidth<=t,o=(e,t)=>a?s[e]||s[t]:s[t],r=o("mp4Mob","mp4Desk");if(!r)return;const d=document.createElement("video");d.className="full-bg-video",["autoplay","loop","muted","playsinline","webkit-playsinline"].forEach((e=>d.setAttribute(e,""))),d.setAttribute("preload","metadata"),d.setAttribute("aria-hidden","true"),d.poster=o("posterMob","posterDesk")||"",d.muted=d.defaultMuted=!0;const c=o("webmMob","webmDesk");d.innerHTML=(c?`<source src="${c}" type="video/webm">`:"")+`<source src="${r}" type="video/mp4">`;const n=document.createElement("div");n.className="bg-video-hack",n.style.backgroundImage=`url('${r}')`,e.appendChild(d),e.appendChild(n),e.classList.add("loaded"),d.play().catch((()=>{}))},o=new IntersectionObserver(((e,t)=>{e.forEach((e=>{e.isIntersecting&&(a(e.target),t.unobserve(e.target))}))}),{rootMargin:s});document.querySelectorAll(e).forEach((e=>o.observe(e)))});