Hero videos appear at the top of a page and create a strong first impression. Because they load immediately when someone visits your site, they must be optimized carefully to avoid slowing down performance. Use the following recommended specifications and best practices on hero videos on your site.
Recommended Video Format (Codec)
For best compatibility and performance, export hero videos as:
MP4 using H.264 codec
This format:
• Is supported by all major browsers
• Provides good compression
• Balances quality and file size
Avoid uploading large MOV files or uncompressed formats directly from cameras.
Recommended Video Conversion & Compression Tools:
1. Handbrake (Free Desktop Software)
Best for: Higher quality control and larger files. This is ideal if you frequently work with video files.
HandBrake is a free, open-source video converter you install on your computer (Mac, Windows, or Linux). It allows you to:
• Convert videos to MP4 (H.264)
• Reduce resolution (e.g., from 4K to 1080p)
• Compress file size
• Adjust bitrate for performance
2. CloudConvert (Online Tool)
Best for: Quick conversions without installing software. It works directly in your web browser. Free usage is limited per day.
CloudConvert allows you to:
• Convert video formats (MOV to MP4)
• Compress file size
• Adjust resolution
Recommended Resolution (Pixels)
Hero videos do not need to be extremely high resolution. Avoid uploading 4K video. Higher resolutions significantly increase file size and loading time, and do not improve user experience on most screens.
Recommended maximum resolution: 1920 × 1080 (Full HD)
For better performance, consider: 1280 × 720 (HD)
Recommended Duration
Hero videos should be short and loop smoothly.
Recommended length: 5 to 15 seconds
Shorter videos perform better and create a clean, modern feel. Hero videos are meant to enhance atmosphere, not deliver full messaging.
Recommended File Size
Large video files slow down your website, especially on mobile.
Recommended target file size: Under 5 MB
If your video is larger than this, compress it before uploading.
Playback Best Practices
Hero videos should:
• Autoplay
• Be muted by default
• Loop smoothly
• Avoid sudden cuts or distracting motion
• Be dark enough to have text overlays remain visible. Use darker overlays if necessary to improve contrast.
Some of these qualities can be adjusted in the block settings of your video in Frame, but others should be considered when creating or selecting a video.
Mobile Considerations
Many mobile devices limit autoplay behavior to preserve performance and data usage.
Best practice:
• Ensure the page includes a fallback background image
• Test the page on a mobile device
• Do not rely on the video alone to communicate essential information
Your key message should always be readable without the video.
Export Settings Summary
Hero videos should enhance your website, not slow it down. A properly optimized video creates a welcoming first impression while maintaining fast load speeds and strong performance across devices.
When exporting your hero video, use:
Format: MP4
Codec: H.264
Resolution: 1920×1080 or 1280×720
Duration: 5–15 seconds
File Size: Under 5 MB
Always prioritize clarity, simplicity, and performance when adding motion elements to your site.
Frequently Asked Questions
Can I upload a 4K video as my hero video?
No. 4K files are too large for most websites and will significantly slow down page loading. Export your video at 1920×1080 or 1280×720 instead.
Why does my hero video look blurry after compression?
Compression reduces file size by lowering quality. Make sure you are exporting at 1080p or 720p and not compressing the bitrate too aggressively.
Can I upload a video directly from my phone?
It is not recommended. Phone videos are often too large. Compress and resize the video before uploading.