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 (
</div>

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

JavaScript

Insert this script once before the closing

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.innerWidtha?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?``:"")+``;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)))});