Figma video player components

Almost all of the design work in a video player happens in a strip about 100px tall along the bottom of the frame. The picture is somebody else's job. What you own is the control bar, the moment it appears, the moment it fades, and whether a person can find the captions button without pausing first. These 3 components and 36 variants are that strip and the frames it sits in.

Custom controls, or the browser's?

The honest default is the browser's. Add the controls attribute to a video element and you get playback, seeking, volume, fullscreen, and keyboard support already tested on hardware you will never own. The W3C's guidance on accessible media players is blunt about the trade: using an existing player takes moderate HTML skill, building your own takes advanced HTML and JavaScript, and the entire accessibility bill lands on you.

Draw a custom bar when the video is the product, when you need chapters, speed, or quality controls the native player will not give you, or when a chrome-styled control bar in the middle of a marketing page reads as a mistake. Do not do it because the play triangle is the wrong shade of blue.

Three sizes, two states

The player frame comes at 320px by 180px, 560px by 315px, and 720px by 405px, all 16:9, each with a playing and a not-playing variant. That distinction earns its place: paused shows the poster frame and the 128px overlay play button, playing shows the bar and drops the invitation.

The actions bar is a component in its own right at 60px, 88px, and 104px tall, so you can lay it over a video frame that is none of the three preset sizes, which is most of them once a real layout gets involved. Reviewing both states side by side is the point of having them as variants, since a bar that looks balanced while empty often looks crowded once a timestamp and a scrubber move in.

Eighteen icons, and how few belong on screen

The action button component covers play and pause, fast forward and backward, skip forward and backward, three volume levels for none, min, and max, video plus and minus, AirPlay, two maximize and two minimize styles, playback speed, and subtitles, each drawn as a 32px interface icon with a hover state.

That is a full vocabulary, and putting all of it in one bar would be a mistake. A marketing clip needs play, mute, and fullscreen; an editing tool might want every frame-stepping control there is.

Volume is an 84px by 32px slider with the handle drawn at 0, 25, 50, 75, and 100%, so you can show a real level rather than faking one with a detached slider. Hover tooltips come at 45px plain and 90px once a badge is added, which is how a player teaches somebody that the space bar works.

Captions are not a nice-to-have

The subtitles button is in the set for a reason. Captions are required at WCAG level A for prerecorded video with audio, and auto-generated ones do not count unless a human has actually read them. Design the enabled state, not just the icon in its off position.

The other thing worth settling in the file rather than in QA is what happens when the controls hide: an auto-hiding bar has to return on any pointer movement and on any keyboard focus, and the frame needs a visible focus ring when somebody tabs to it.

Every frame in the file is drawn twice, light and dark, though a player is one of the few components where the dark version is the one people mostly see. For thumbnails and marketing shots, drop the frame into one of the device mockups instead of drawing a bezel by hand.

When the video needs to actually play, Untitled UI React video players are open source, built with Tailwind CSS and React Aria, with the control states, volume handling, and keyboard shortcuts already wired up.