wiki/knowledge/website/american-extractions-hero-video-optimization.md · 352 words · 2025-09-29
Hero Video Optimization for Website
Overview
When replacing a static hero image with an autoplay background video, several technical constraints apply to ensure the page loads quickly and the video looks polished. This guidance emerged from a discussion with [1] about adding a looping background video to their homepage hero section.
Key Specifications
Hosting
- Do not upload the video file directly to the website or CMS.
- Host the video on Vimeo and embed a Vimeo player on the page.
- This ensures the video streams from Vimeo's CDN and has no impact on page load speed.
Duration & Behavior
- Keep the video under 20 seconds.
- Set it to loop continuously (no play button required for background hero use).
- The video should autoplay silently on page load.
Resolution
- Resolution is content-dependent — there is no single universal setting.
- Start at a medium resolution, then adjust up or down based on visual quality:
- Close-up or detailed footage requires higher resolution.
- Wide or distant shots can tolerate lower resolution without looking pixelated.
- Iterate: export at medium, test on the live page, increase resolution if it looks fuzzy, decrease if the file is unnecessarily large.
- A useful starting point: ask an AI tool (e.g., ChatGPT) for a recommended hero video resolution, then treat that as a baseline to refine.
Export Settings (for editors using DaVinci Resolve or similar)
- Export at a medium bitrate/resolution first.
- Upload to Vimeo, embed, and evaluate on the actual website at full browser width.
- Adjust and re-export as needed until the balance between visual quality and file size is acceptable.
Why Vimeo Over Direct Upload
Embedding via Vimeo offloads bandwidth and delivery entirely to Vimeo's infrastructure. A video file hosted directly on the web server would be downloaded by every visitor on page load, significantly slowing the site — especially on mobile. The Vimeo embed only streams when the player initializes, keeping the initial page payload small.