Video Player
A frame of film wearing Rogo's chrome rather than the browser's.
A headline lives here
Name on screen
Their role
Overview
Built on Media Chrome, because <video controls> cannot be
styled: every browser draws its own bar and none of them is Rogo's. Media Chrome supplies the state
and the controls as custom elements; everything they look like comes from here.
import { VideoPlayer } from "@rogo-technologies/brand/video-player";
<VideoPlayer
src="/videos/forward-deployed-bankers.mp4"
poster="/images/film-poster.jpg"
title="How Rogo works with the firms it serves"
overlay={<Headline />}
caption={<Speaker />}
/>;Everything over the video is a slot
The player knows how a Rogo film is framed and nothing about any particular film, so the same component carries a customer story, a product walkthrough or a launch film.
| Prop | Where it lands |
|---|---|
overlay | Centred over the head of the frame: a headline, and any call to action. |
caption | The foot of the frame, on the left: who or what is on screen. |
title | Names the film for assistive technology. Never rendered. |
src, poster, loop, muted, autoPlay and preload pass through to the video element.
The frame uses --marketing-radius-media (rounded-marketing-media) — the same token as
photographs on the marketing site.
The frame is 16:9 unless you say otherwise
className overrides the shape, and tailwind-merge means an aspect-* class replaces the default
rather than fighting it. The website's home film uses the design's 1440 × 912:
<VideoPlayer className="aspect-[1440/912]" … />The chrome
The progress rail sits clear of the bottom edge, inset to the same gutter as the caption above it, rather than running edge to edge along the floor of the frame. It is a hairline with no thumb (a read of progress, not a handle), though dragging it still seeks, and the element around it is taller than the line it draws so there is something to grab.
Controls and cursor step back two seconds into playback and return on any movement. The centred
play button shows only while paused: once the film is running the frame itself is the pause
control, and a button sitting over someone's face is in the way. Its glyphs are the filled cut
of the icon set, from @rogo-technologies/brand/icons-filled, since a play control is the
subject, not a label.
Media Chrome's own look is set through CSS custom properties, and they live on the component rather than in a stylesheet, so rendering the player is all a surface has to do to get the brand's chrome.