Video Hero

Theme: Multipurpose Fashion Theme

Help Center > Sections & Blocks > Hero & Banner Sections > Video Hero

Overview

The Video Hero section displays a full-width video background with text overlay (heading, subheading, and optional button). Use it for a cinematic first impression on your homepage or campaign pages. Supports Shopify-hosted video and YouTube/Vimeo URLs. The section is designed for merchants who want a high-impact, video-driven hero without slides.

Where to Add This Section

Go to Online Store > Themes > Customize.
Select Homepage (or desired template).
Click Add section.
Choose Video hero.
Position at the top for maximum impact.
Save.

Image placeholder: Add a screenshot of Video hero section in Theme Customizer.

Quick Setup (3 Steps)

Add video: Upload a video file in the Video setting, or paste a Video URL (YouTube or Vimeo).
Add content: Enter Heading, Subheading, and Button text + Button link.
Adjust height: Set Height (desktop) and Mobile height to fit your layout.

Section Settings

Setting	Description	Default
Full width	Stretch to viewport edges	On
Heading	Main headline overlay	-
Heading tag	Semantic heading level (H1, H2, H3)	H2
Heading size	Heading font size (px)	70
Subheading	Text above heading	-
Button text	CTA button label	-
Button link	CTA button URL	-
Button color	Button background color	#ffffff
Button text color	Button text color	#1a1a1a
Text alignment	Left, Center, Right	Center
Video	Upload video file (Shopify)	-
Video URL	YouTube or Vimeo URL	-
Poster image	Fallback image for external video (YouTube/Vimeo)	-
Text protection	Overlay opacity for text readability (0-100)	30
Height	Section height on desktop (px)	650
Mobile height	Section height on mobile (px)	350

Heading Tag Option

The Heading tag setting lets you choose the semantic HTML level for the main heading: H1, H2, or H3. Use H1 when this section is the primary heading on the page (e.g. homepage hero). Use H2 or H3 when other content above has a higher-level heading. Proper heading hierarchy improves accessibility and SEO.

Lazy Loading Behavior

For YouTube and Vimeo embeds, the section uses IntersectionObserver to load the iframe only when the section enters the viewport. This reduces initial page load and improves performance. The iframe src is not assigned until the section is visible (with a 50px root margin). If IntersectionObserver is not supported by the browser, the iframe loads immediately as a fallback.

Poster Image

The Poster image setting provides a fallback image for external video (YouTube/Vimeo). When set, the image appears as a background behind the iframe until the video loads, and if the video fails or is blocked, the poster remains visible. For Shopify-hosted video, the video's preview image is used; you can override it with the poster image setting. Use a high-quality image that represents the video content.

Reduced Motion Support

When a visitor has prefers-reduced-motion: reduce enabled in their system preferences:

Native video: Autoplay is disabled; the video does not play automatically.
YouTube/Vimeo: The static embed URL is used (no autoplay); controls are shown.
Animations: Content fade-in and transitions are disabled.

Video source priority

If both Video (upload) and Video URL are set, the uploaded Video is used.
Video URL supports: youtube.com, youtu.be, vimeo.com.
For YouTube/Vimeo, the theme embeds the video; autoplay is muted for browser compliance.

Performance Recommendations

Resolution: Use 1920x1080 or lower for desktop; consider 1280x720 for faster loading.
Duration: Keep videos short (5-15 seconds) for hero backgrounds; looping is automatic.
Compression: Compress video before upload; aim for under 5MB for native video.
LCP impact: Video can affect Largest Contentful Paint. Use poster image for external video to improve perceived load. Consider placing Video Hero below the fold if LCP is critical.

Technical Compliance

Muted autoplay: Video autoplays only when muted to comply with browser policies.
youtube-nocookie: YouTube embeds use youtube-nocookie.com for privacy.
iOS autoplay: playsinline is used so video plays inline on iOS without fullscreen.
Accessibility: Section uses role="region" and aria-label; video/iframe are aria-hidden="true" as decorative; iframe has a descriptive title.

Limitations

No audio playback (muted only).
No video controls (autoplay background style).
Single video only (no slides or multiple videos).

Step-by-Step Setup

Step 1: Add the section

Add Video hero at the top of your homepage (or desired template).

Step 2: Add your video

Option A: Upload video

In Video, click to upload or select a video file.
Supported format: MP4 (recommended).
Keep file size reasonable (under 10MB) for faster loading.

Option B: Use YouTube or Vimeo

Leave Video blank.
In Video URL, paste the full URL (e.g. https://www.youtube.com/watch?v=VIDEO_ID or https://vimeo.com/123456789).
Add Poster image for a fallback when the video loads or if it fails.
The theme will embed and autoplay (muted) the video when it enters view.

Step 3: Add overlay content

Enter Heading (e.g. "Discover Our Collection").
Choose Heading tag (H1, H2, or H3) for semantic structure.
Enter Subheading if desired (e.g. "Handcrafted for you").
Set Button text and Button link (e.g. "Shop now", /collections/all).
Adjust Text alignment (Center is typical for hero).
Set Text protection (20-40) if the video makes text hard to read.

Step 4: Adjust layout

Set Height (desktop) - 500-800px works for most designs.
Set Mobile height - 300-450px for phones.
Turn Full width On for edge-to-edge display.
Save.

Image placeholder: Add a screenshot of Video hero on the storefront with video playing and text overlay.

Use cases

Brand film: Cinematic brand story or ethos
Product showcase: Motion clips of products in use
Ambiance: Looping background video for lifestyle stores
Event promo: Launch or seasonal campaign

For merchants

Use short, punchy headlines; video attracts attention, so keep text minimal.
Ensure video is relevant to your brand (product demo, brand story, ambiance).
Test on mobile: video may not autoplay on some devices; text must still be readable.
Add a poster image for YouTube/Vimeo to improve load experience and fallback.

Accessibility

Video is decorative/supplementary; key content is in text overlay.
Ensure heading and button meet color contrast (WCAG).
Autoplay is muted; no unexpected audio.
Text protection overlay improves readability over moving video.
Heading tag option allows proper semantic hierarchy.

Previous steps

Next steps

Hero (Optional Slides): Image slideshow hero
Large Image with Text Box: Single image + text
Featured Collection: Products below hero

Common mistakes

Mistake	Fix
Video not playing	Use MP4 for upload; ensure YouTube/Vimeo URL is correct
Text unreadable	Increase Text protection overlay
Video too large	Compress video; aim for under 10MB
No fallback	Add Poster image for external video; ensure first frame looks good for native
Button link empty	Add Button link if Button text is set
Mobile height too small	Set Mobile height to at least 300px

FAQs

1. Why is my video not autoplaying?

Modern browsers block autoplay with sound. The Video Hero automatically plays videos muted to comply with browser policies. If autoplay still does not work, check:

The video is MP4 (H.264)
The file is not excessively large
Your device is not in Low Power Mode
Your browser does not block autoplay

2. Does the Video Hero support sound?

No. Background videos are muted by default to meet browser autoplay policies and accessibility standards. This section is intended for visual impact, not audio playback.

3. What video format should I upload?

Use MP4 (H.264 codec). Recommended resolution is 1280x720 or 1920x1080. Keep the file under 10MB for best performance.

4. How long should my background video be?

For best results, use a short looping video between 5 and 15 seconds. Seamless loops provide a smoother visual experience.

5. What happens if both Video and Video URL are set?

The uploaded Shopify video takes priority. The Video URL will be ignored if a file is uploaded.

6. Can I use YouTube or Vimeo?

Yes. Supported formats include:

youtube.com
youtu.be
vimeo.com

YouTube videos are embedded using the privacy-enhanced domain (youtube-nocookie.com).

7. Why does my video not play on mobile?

Some mobile browsers restrict autoplay, especially in Low Power Mode. If autoplay is blocked, the first frame or poster image will display instead.

8. What is the "Text protection" setting?

Text protection adds a semi-transparent overlay above the video to improve text readability. Increase the value if your heading is hard to read against the background.

9. Can I change the heading tag (H1, H2, H3)?

Yes. The Heading tag setting allows you to choose semantic markup for SEO and accessibility purposes.

10. Does this section affect performance?

Large video files can impact loading speed and Largest Contentful Paint (LCP). To optimize:

Compress video before upload
Keep duration short
Use recommended resolution
Avoid unnecessarily large files

11. Does the section respect reduced motion settings?

Yes. If a visitor has enabled "Reduce motion" in their system preferences, autoplay behavior may be adjusted to provide a more comfortable browsing experience.

12. Can I add multiple buttons?

The default Video Hero supports one primary button. For multiple calls-to-action, consider using a custom block-based hero section.

13. What happens if the video fails to load?

If the video cannot load, a fallback image or placeholder will display while keeping overlay text visible.

14. Can I add video controls?

No. This section is designed as a decorative background and does not display video controls.

15. Is this section compatible with Online Store 2.0?

Yes. The Video Hero is fully compatible with Online Store 2.0, supports JSON templates, section presets, and theme editor customization.

Multipurpose theme documentation