Centered With Video Mockup
Centered hero with headline, lede, and dual CTAs above a video player mockup with poster, play button, control bar, and a row of chapter markers.
Centered hero with headline, lede, and dual CTAs above a video player mockup with poster, play button, control bar, and a row of chapter markers.
Search blocks by description or jump to a page.
The source for every Marketing block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Centered With Video Mockup is a centered hero with a video player under the copy. A headline, lede, and two CTAs sit above a player mockup: a poster area with a product tour chip, a centered play button, and a caption strip, over a control bar with a scrubber, timestamps, and player icons. A row of chapter markers sits below the frame. Everything is rounded divs and theme tokens, no screenshot or video file, so the mockup never goes out of date and inverts cleanly in dark mode. The hero fills the viewport and ships without its own header.
The chapters are a plain array of time and label, the scrubber position is a single inline percentage, and the tour chip and caption are lone strings, so the player suggests any walkthrough without redrawing anything. Headline, lede, and button labels are independent copy strings. Nothing here actually plays, it is a still frame built to look like a paused tour.
Reach for this block when a short walkthrough sells the product better than a static screen or a wall of features. It reads as motion where centered-with-browser-mockup reads as a still window, so pick it when the story is a sequence of steps rather than one dashboard. If you have no tour to show yet, centered-minimal keeps the fold clean without implying a video that does not exist.
A natural flow around it on a Marketing Pro page:
Before
After
One strong use is a three minute product tour that frames the whole workflow. Other ways to cast the player:
Tip: keep the chapter labels to three, a short table of contents reads as a tight tour while six reads as a lecture.