---
title: "Hero Video Pro — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Tayyeba Shoaib · Sections. Hero Video Pro loads a different video file on desktop, tablet, and mobile — so users don't download a 20MB file on their phone."
canonical: "https://framer.elliotli.dev/component/hero-video-pro"
---

[Home](/)/[Components](/components)/[Sections](/components/category/sections)/Hero Video Pro

# Hero Video Pro

Responsive video hero with fades

[View on Framer](https://framer.com/marketplace/components/hero-video-pro/?via=elliot-li)

![Hero Video Pro preview image 1](https://framer.elliotli.dev/og/component/hero-video-pro/b5ee523ca4656d52/1600x1200.jpg)

## Summary

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

## Description

**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**

1.  Copy the component URL
    
2.  Paste it onto your Framer canvas (or Assets → Insert URL)
    
3.  Set **Width to Fill** so per-breakpoint logic activates
    
4.  Upload a video (or paste a URL)
    
5.  Optionally add tablet/mobile videos, posters, and a fade style
    

**Support:** [graymatterlogic@gmail.com](mailto:graymatterlogic@gmail.com) — response within two working days.

## Rank history [How rankings work →](/terms#rankings)

-   All · #4372

## Details

- **Author**: Tayyeba Shoaib
- **Price**: $5.00
- **Published**: 2026-07-20
- **Updated**: 2026-07-20
- **Added**: 2026-07-20
- **Categories**: Sections

## More like this

-   [Project Index](/component/project-index) — Bernardo Lickfold · Free — Editorial index: hover & scroll
-   [Face Parade](/component/face-parade) — RAjan · Free — Animated team profiles
-   [Staircase Cover Flow](/component/staircase-cover-flow) — Karim Saif · $7 — editorial-inspired image gallery
-   [In Their Words](/component/in-their-words) — Majed Monem · $9 — A wall of customer quotes