Background video preset

Use it for muted, looping decoration behind page content.

Use the packaged preset

import {
  BackgroundVideo,
  BackgroundVideoPlayer,
  BackgroundVideoSkin,
} from '@videojs/react/background';
import '@videojs/react/background/skin.css';

<BackgroundVideoPlayer>
  <BackgroundVideoSkin>
    <BackgroundVideo src="background.mp4" />
  </BackgroundVideoSkin>
</BackgroundVideoPlayer>

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.

See Customize skins for the complete styling and ownership workflow.

Behavior and API

• The packaged export is BackgroundVideoSkin in React and<background-video-skin> in HTML.
• The on-demand preset includes duration and seeking behavior.
• Default exposes the full primary and secondary control regions.

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