Split With Video
A hero split between a headline with CTA and an embedded product video. Use it to show your product in motion at the top of a landing page.
A hero split between a headline with CTA and an embedded product video. Use it to show your product in motion at the top of a landing page.
Search blocks by description or jump to a page.
Split With Video divides the fold into two equal columns. The left column holds a version badge, a large headline, a supporting paragraph, a primary button paired with a secondary outline button, and a social proof row of stacked avatars with a five-star rating and review count beneath them. The right column is an aspect-ratio-constrained video panel with rounded corners, an autoplay muted loop, a subtle overlay tint, and a small "Watch demo" button anchored to the bottom-right corner.
The copy column and the video panel are independent. You can rewrite the headline and subtext, swap the badge label, and adjust the button labels without touching the video side. The avatar row and star rating are their own element so you can remove social proof entirely or replace the rating copy with a different trust signal.
Reach for this block when you need to show your product in motion before a visitor scrolls. It suits HR platforms and people-ops tools particularly well: a short walkthrough video of a hiring workflow communicates the product faster than a screenshot, and the social proof row below the CTA reinforces credibility with the cautious buyers common in that space. Compared to a split image hero, the video panel carries more of the selling weight so the text column can stay concise.
A natural flow around it on a Marketing (Legacy) page:
Before
After
The most direct use is a product demo reel: drop in a short screen recording and let the video do the explaining while the text stays tight. A few other ways to use the frame:
Tip: keep the video under ninety seconds and make sure the first frame communicates value on its own since autoplay is muted by default.