Background video preset

Use it for muted, looping decoration behind page content.

Use the packaged preset

<script type="module">
  import '@videojs/html/background/player';
  import '@videojs/html/background/video';
  import '@videojs/html/background/skin';
</script>

<background-video-player>
  <background-video-skin>
    <background-video src="background.mp4"></background-video>
  </background-video-skin>
</background-video-player>

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.