Video Hero

What it does

The video hero opens your page like a scene: a muted clip looping quietly behind your headline, selling the vibe before a single word gets read. Bars, gyms, travel, venues, anywhere atmosphere is the product. It sets the mood in the first second, before anyone reads.

• Sound off, always; the video never plays audio and never shows controls.
• The hero fills most of the first screen, with an eyebrow line, a big headline, and one or two buttons centered in it.
• A poster image shows instantly, treated as the page's first paint, so the hero looks finished before the video arrives.
• Visitors who prefer less motion get the poster, full stop.
• The overlay keeps your words readable over every single frame, not just the calm ones.
• Keep the clip short and heavily compressed; the code says how.

How it works

1. 01

   Pick the overlay, a dark veil, a bottom-up gradient, or a tint of your brand color.

2. 02

   Copy the prompt, the hero's build brief for your AI, into whichever AI you use.

3. 03

   Add a short, tightly compressed clip and a poster frame that stands alone with pride.

4. 04

   Write the eyebrow, headline, and button over it, words first, atmosphere second.

5. 05

   Test the fallbacks: reduced-motion and slow connections should get a hero that looks complete with just the poster.

6. 06

   Watch a whole loop with the text up: if any moment makes the headline hard to read, darken the overlay, not the message.

What you can customize

• Overlay: dark is the safe cinematic pick; the gradient darkens just where your text sits; brand tint colors the whole mood.
• Headline, buttons, and type adapt to your site automatically, because your AI builds the hero right inside your own design, text always on top.

To let visitors watch your live stream with sound, not just a silent loop, use a live stream player for your website.

To let visitors pick and play your videos, add a video gallery section.