---
title: Hero Video Optimization for Website
type: article
created: '2025-09-29'
updated: '2025-09-29'
source_docs:
- raw/2025-09-29-american-extractions-marketing-meeting-90595959.md
tags:
- website
- video
- performance
- hero-section
- vimeo
layer: 2
client_source: null
industry_context: null
transferable: true
---

# 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 [[clients/american-extractions/_index|American Extractions]] 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.

## Related

- [[clients/american-extractions/_index|American Extractions Client Overview]]
- [[knowledge/website/seo-health-score-improvements|SEO Health Score Improvements]]