About Hero Video Pro
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.
