Hero library · video
Video inset under the headline
hero.video-inset-frame: any design can use this hero. It suits the styles below; pairing it with another style makes the picker warn about a clash.
- Rule
- A full-width display headline at step 6; under it, on one row, a subhead + CTA in 1–4 and a wide 21:9 rounded video window in 5–12 that sits like part of the headline.
- Slots
eyebrow, headline, subhead, cta, heroImage- Grid
- headline
1-12 · copy 1-4 · video 5-12 - Notes
- The video window is muted, looping and playsinline with a poster; it expands to a full player (with sound and controls) on click. Under prefers-reduced-motion show the poster and a play button instead of autoplay.
Do
- Set the headline across all 12 columns at step 6, two or three lines, so the video window starts inside the first screen.
- Put the 21:9 video window in 5–12 directly under the headline, with the style's radius.
- Sit the subhead and one CTA in 1–4, vertically centred on the video.
- Autoplay muted and looping; click opens the full video with sound and controls.
Don't
- Don't add a play-button overlay on the autoplaying loop (only on the reduced-motion poster).
- Don't use a 16:9 or square window; the wide 21:9 crop is the pattern.
- Don't add a second CTA.
Phone width
- Headline (step 6), video at 16:9 full width, then subhead and CTA.
Try this hero in the pickerllms.txt