Video hero
Background video (uploaded or YouTube/Vimeo) with overlay copy.
Updated 2026-05-09
Hero with a looping background video instead of an image.
Sources
| Source | How |
|---|---|
| Uploaded video | Video file picker (Shopify hosted, MP4) — best performance |
| YouTube | Paste full URL (youtube.com/watch?v=... or youtu.be/...) |
| Vimeo | Paste full URL (vimeo.com/...) |
A separate Video file (mobile) picker lets you upload a vertical/square mobile-optimised version. If empty, the desktop video is used on mobile (cropped).
Playback settings
| Setting | Notes |
|---|---|
| Autoplay | When on, video starts muted automatically |
| Loop | Restart when video ends |
| Muted | Forced when Autoplay is on (browser requirement) |
| Show play button | Hidden when Autoplay is on (always visible otherwise) |
| Show sound icon | Mute / unmute toggle in the bottom-right corner |
Content
Same settings as the hero banner: eyebrow, heading + italic part, sub-text, two buttons, content position grid.
Section height
original uses the video's aspect ratio (for uploaded videos). For YouTube/Vimeo, original falls back to 16:9. Use fixed if you want a precise hero height.
Performance
- Uploaded videos use Shopify's CDN with native
<video>andplaysinlinefor mobile autoplay. - YouTube / Vimeo use lazy-loaded iframes via the official Player API. The play button click activates the iframe (no embed loaded until clicked unless autoplay is on).
Tips
- Keep videos under 15s and under 5MB for speed. Compress with HandBrake at 2 Mbps target.
- For autoplay over slow connections, provide a mobile-optimised file (smaller, vertical orientation).
Need a hand? Contact support.