Minimal live video skin

Use it for a live stream with a smaller control footprint.

Live

Use the packaged preset

import { LiveVideoPlayer, MinimalLiveVideoSkin } from '@videojs/react/live-video';
import { HlsVideo } from '@videojs/react/media/hls-video';
import '@videojs/react/live-video/minimal-skin.css';

export function Player() {
  return (
    <LiveVideoPlayer>
      <MinimalLiveVideoSkin>
        <HlsVideo src="https://example.com/live.m3u8" crossOrigin="anonymous" />
      </MinimalLiveVideoSkin>
    </LiveVideoPlayer>
  );
}

Customize the skin

Packaged skins support --media-accent-color, --media-accent-text-color,--media-border-radius, and --media-scale-unit. Add your own class name and style values to the skin root.

Use the skin's renderPoster prop to replace its poster.

See Customize skins for the complete styling and ownership workflow.

Behavior and API

• The packaged export is MinimalLiveVideoSkin in React and<live-video-minimal-skin> in HTML.
• The live preset replaces on-demand time controls with live-edge state.
• Minimal keeps the same feature family in a smaller responsive layout.

For player state and feature details, see Presets. For the UI building blocks, see UI components.