Skip to content
FrameworkStyle

Default video skin

Full responsive video controls with settings, feedback, gestures, and keyboard input

Use it for a full-featured on-demand video player.

Use the packaged preset

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

<video-player>
  <video-skin>
    <video src="video.mp4"></video>
  </video-skin>
</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.

Place an image in the poster slot to replace the poster.

See Customize skins for the complete styling and ownership workflow.

Behavior and API

  • The packaged export is VideoSkin in React and<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.