Cross-Browser Background Video, Shipped Solo Across Four Layouts.

Three browsers, three different failure modes. Safari played only the first video on the page and ignored the rest. Chrome rendered static thumbnails instead of autoplaying. Firefox showed thumbnails but lied about the video state in its API responses. The store needed Liquid sections supporting four layout variants (columns, scroll, collapsible, slider), each capable of rendering either an image or a silent looping background video.

The root cause was browser autoplay policy enforcement. Each browser implements the spec differently, and Shopify's Liquid rendering compounded the inconsistencies. I built a custom IntersectionObserver solution that manages video lifecycle based on viewport visibility: videos load and play only when scrolled into view, pause when scrolled out (saving battery on mobile), and handle the Safari-specific quirk of requiring user gesture delegation for multiple video elements.

Zero third-party dependencies. Zero layout shifts. The videos are truly background elements: muted, looping, with no controls, and a static image fallback for browsers or devices that refuse autoplay entirely.