Hero Video Pro

Hero Video Pro loads a different video file on desktop, tablet, and mobile — so users don't download a 20MB file on their phone.

A responsive hero video background, done properly. Hero Video Pro loads a different video file on desktop, tablet, and mobile — so users don't download a 20MB file on their phone. Seven fade styles, per-breakpoint art direction, and the annoying edge cases (Safari autoplay, SSR, missing sources) handled for you. What's included Per-breakpoint videos — separate desktop / tablet / mobile files, uploaded to Framer or linked from a URL Per-breakpoint posters — fast first paint before video loads Per-breakpoint crop — nine object-position values per device Seven fade styles — none, left, right, top, bottom, vignette, full — with control over reach, colour, intensity SSR-safe — no hydration warnings in Framer's static export Autoplay-hardened — handles iOS / Safari autoplay and empty-source edge cases ResizeObserver-guarded — works where ResizeObserver isn't available Start simple, add detail later You don't have to fill every field. Blanks fall back sensibly: One video? Upload as Desktop. Tablet and mobile use the same file. Two videos? Desktop + Mobile — tablet falls back to Desktop. Full art direction? Upload all three. Crop and fades follow the same rule — set Desktop, override tablet/mobile only where needed. Rule of thumb: Desktop is the base, tablet overrides desktop, mobile overrides tablet. How to use it Copy the component URL Paste it onto your Framer canvas (or Assets → Insert URL) Set Width to Fill so per-breakpoint logic activates Upload a video (or paste a URL) Optionally add tablet/mobile videos, posters, and a fade style Support: graymatterlogic@gmail.com — response within two working days.

Responsive video hero with fades