UI components

UI components can go anywhere inside a <Player>.

However, you should consider placing your components in <Container>. Components in <Container> will go fullscreen with the player, respond to user activity, and more.

UI components can go anywhere inside a <video-player>.

However, you should consider placing your components in <media-container>. Components in <media-container> will go fullscreen with the player, respond to user activity, and more.

For components you add yourself, use the documented props, state data-* attributes, and CSS custom properties. Add your own className when you need a selector.

For components you add yourself, select them by their custom element name. Use the documented state data-* attributes and CSS custom properties to style them.

The render prop

The render prop is the primary customization mechanism. It accepts a function that receives props and state, and returns your element. The props object includes event handlers, ARIA attributes, data attributes, and a ref — always spread {...props} to keep everything working:

import { PlayButton } from '@videojs/react';
import { PauseIcon, PlayIcon } from '@videojs/react/icons';

<PlayButton
  render={(props, state) => (
    <button {...props}>
      {state.paused ? <PlayIcon /> : <PauseIcon />}
    </button>
  )}
/>

className and style also accept functions of state for dynamic styling without a full render prop:

<PlayButton
  className={(state) =>
    state.paused ? 'btn btn--paused' : 'btn btn--playing'
  }
/>

Data attributes and CSS custom properties

Components reflect player state as data-* attributes on their element. For example, data-paused or data-volume-level="high".

This lets you style state changes in pure CSS:

/* Show/hide icons based on play state */
.play-icon  { display: none; }
.pause-icon { display: none; }

button[data-paused] .play-icon        { display: inline; }
button:not([data-paused]) .pause-icon { display: inline; }

Each component’s reference page documents its full set of data attributes.

Some components also expose CSS custom properties for continuous values like fill percentage and pointer position. Sliders, for example, set --media-slider-fill and --media-slider-pointer. See individual component reference pages for specifics.

Add icons

Import @videojs/html/icons/element once in your app.ts to register <media-icon>. Choose an icon with name. Set family="minimal" to use the Minimal skin’s icon designs. You can also use your own text or SVG.

import '@videojs/html/icons/element';

<media-play-button class="my-play-button">
  <media-icon class="play-icon" name="play"></media-icon>
  <media-icon class="pause-icon" name="pause"></media-icon>
</media-play-button>

Style components with state

Components add data-* attributes to describe their current state. For example, a play button adds data-paused while the media is paused. Use those attributes in CSS:

.my-play-button .pause-icon {
  display: none;
}

.my-play-button:defined:not([data-paused]) .play-icon {
  display: none;
}

.my-play-button:defined:not([data-paused]) .pause-icon {
  display: inline-flex;
}

The browser matches :defined after it loads the custom element. This keeps the play icon visible while JavaScript loads.

Each component’s reference page documents its full set of data attributes.

Some components also expose CSS custom properties for continuous values like fill percentage and pointer position. Sliders, for example, set --media-slider-fill and --media-slider-pointer. See individual component reference pages for specifics.

Compound components use dot notation off a shared namespace:

<VolumeSlider.Root orientation="vertical">
  <VolumeSlider.Track>
    <VolumeSlider.Fill />
  </VolumeSlider.Track>
  <VolumeSlider.Thumb />
</VolumeSlider.Root>