MinimalVideoSkin

Use it when the full video feature set should take less visual space.

0:00/0:00

0:00

Settings

Use the packaged preset

import { VideoPlayer, MinimalVideoSkin } from '@videojs/react/video';
import { Video } from '@videojs/react/video';
import '@videojs/react/video/minimal-skin.css';

export function Player() {
  return (
    <VideoPlayer>
      <MinimalVideoSkin>
        <Video src="video.mp4" />
      </MinimalVideoSkin>
    </VideoPlayer>
  );
}

Install editable source

Install this Skin and its exact dependencies with Shadcn, or copy the same generated files manually. The Player and media remain package imports.

{
  "registries": {
    "@videojs": "https://shadcn.videojs.org/r/react/{name}.json"
  }
}

pnpm dlx shadcn@latest add @videojs/video-minimal

{
  "registries": {
    "@videojs": "https://shadcn.videojs.org/r/react/css/{name}.json"
  }
}

pnpm dlx shadcn@latest add @videojs/video-minimal

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 MinimalVideoSkin in React and<video-minimal-skin> in HTML.
• The on-demand preset includes duration and seeking behavior.
• 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.