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

Three browsers behaved three different ways under the same Liquid section. Safari played only the first video and ignored the rest, Chrome rendered static thumbnails instead of autoplaying, and Firefox showed thumbnails while its API quietly lied about the video state. 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 and zero layout shifts. The videos sit as true background elements: muted and looping, controls hidden, with a static image fallback when a device refuses autoplay.