Minimal video player

import {MinimalVideoPlayer} from '@primer/react-brand'

Use MinimalVideoPlayer for short, silent product demonstrations that need only a play and pause control.

Use VideoPlayer when viewers need audio, captions, seeking, volume, fullscreen controls, branding, or a dedicated programmatic playback API.

Examples

Default

Pass a native video URL with src. The required title provides a concise accessible name for the video.

Native source element

The component also accepts native <source> children.

Disable automatic playback

autoPlay defaults to true, making the video eligible to play when it enters the viewport. Set it to false when playback should always begin with an explicit user action.

Disable looping

Videos loop by default. Set loop to false when the demonstration should stop after one playback.

Customize control labels

Provide localized play and pause labels with internalAccessibleLabels. Keep title focused on naming the video rather than the control.

Playback behavior

MinimalVideoPlayer is always muted, plays inline, and hides native controls. When autoPlay is enabled, it starts only while visible, pauses after leaving the viewport, and resumes after re-entering the viewport unless the viewer paused it manually.

The forwarded ref provides access to the underlying <video> element, but the component does not provide a higher-level programmatic playback API.

The component respects the viewer’s reduced-motion preference. It suppresses initial automatic playback when reduced motion is requested and pauses playback if that preference becomes active. A viewer can still start the video with the visible play control.

Accessibility

The title prop provides an accessible name for the video. It does not replace a text alternative for meaningful visual content.

For decorative motion or a demonstration that repeats information already communicated by the surrounding content, use a concise title. A separate description is not required because the same information is already available on the page.

For a meaningful silent demonstration, provide adjacent text that communicates the important actions and outcomes shown in the video. Associate that text with the video using the native aria-describedby attribute, as shown in the default example.

Use VideoPlayer instead when the media needs audio, captions, seeking, volume, fullscreen controls, or a standalone viewing experience.

Component props

MinimalVideoPlayer supports standard native <video> attributes except the playback attributes controlled by the component.