Hero with video overlay (King Kong pattern)

Background video at reduced opacity + dark gradient + content above. The atmospheric premium hero.

Heroes Built JS-free

Use when — you want the hero to feel cinematic and the brand voice supports atmosphere over directness. Real estate, luxury services, agencies. Bad fit for utilitarian products (SaaS dashboards, e-commerce) — there the video distracts from the conversion task.

Live demo

(Animated gradient stands in for the actual video so this demo works offline.)

Built to specification, made to last

Bespoke architecture in Ibiza. Made-to-measure projects, residence by residence.

The video tag (all attributes required)

<video class="hero-video" autoplay muted loop playsinline preload="auto" aria-hidden="true">
  <source src="hero.mp4" type="video/mp4">
</video>

muted + playsinline are non-negotiable on mobile — without both, autoplay is blocked. aria-hidden skips it for screen readers since it's decorative.

The three layers

.hero-video { opacity: 0.55; }                              /* dims video */
.hero::after { background: linear-gradient(180deg,
                   rgba(13,13,11,0.45), rgba(13,13,11,0.8)); }  /* readability */
.hero-content { z-index: 2; }                                /* above both */

Video encoding

Target < 2 MB. 720p is plenty under an overlay (4K is wasted). H.264, no audio, faststart flag:

ffmpeg -i source.mp4 -vcodec libx264 -crf 25 -preset slow -an -movflags +faststart -vf "scale=1280:-2" hero.mp4

Code playbook: vault/Topics/web-patterns.md § Pattern 3 (Video hero with text overlay).