The Container component acts as the container div element for the Player, using either @radix-ui/react-aspect-ratio or a standard div element. It selectively renders one of these based on the presence of an aspectRatio prop. We show above how to disable the aspect ratio element.

​
Features

  • Provides an aspect ratio container to reduce Cumulative Layout Shift
  • Dynamic data attributes for custom styling based on the current media state

​
Anatomy

Import the components and piece the parts together. 
import * as Player from "@livepeer/react/player";

export default () => (
  <Player.Root>
    <Player.Container>
      {/* Place child elements here, like Video and Controls */}
    </Player.Container>
    {/* Or place other controls outside of here, to not be bound by the aspect ratio Container */}
  </Player.Root>
);

​
Data Attributes

These attributes are dynamically updated based on the current state.

​
data-livepeer-aspect-ratio or data-livepeer-wrapper

Indicates the container type. It’s present if the container is an aspect ratio container (with data-livepeer-aspect-ratio) or a regular div (with data-livepeer-wrapper).
When aspectRatio is set to null on the Root component, then it will be a regular div wrapper with position: relative.

​
data-fullscreen

Reflects whether the content is in fullscreen mode.
  • "true": The content is in fullscreen mode.
  • "false": The content is not in fullscreen mode.

​
data-playing

Indicates if the content is currently playing.
  • "true": The content is playing.
  • "false": The content is not playing.

​
data-can-play

Shows if the content can be played.
  • "true": The content can be played.
  • "false": The content cannot be played due to some restrictions or lack of data.

​
data-playback-rate

Displays the current playback rate.
  • "normal": The playback is at normal speed.
  • "fast": The playback is at a speed faster than normal.
  • "slow": The playback is at a speed slower than normal.
  • "constant": The playback rate is constant (neither fast nor slow).

​
data-error

Indicates if there is an error in the content.
  • "true": There is an error in the content.
  • "false": There are no errors in the content.

​
data-loading

Shows if the content is loading.
  • "true": The content is loading.
  • "false": The content is not loading.

​
data-live

Indicates if the content is live.
  • "true": The content is live.
  • "false": The content is not live.

​
data-has-played

Reflects if the content has been played.
  • "true": The content has been played at least once.
  • "false": The content has not been played yet.

​
data-controls-hidden

Shows if the controls are hidden.
  • "true": The controls are hidden.
  • "false": The controls are visible.

​
data-picture-in-picture

Indicates if the picture-in-picture mode is active.
  • "true": The picture-in-picture mode is active.
  • "false": The picture-in-picture mode is not active.

​
data-video-quality

Displays the current video quality, directly reflecting the videoQuality value from the state. It can be a string indicating the quality level (e.g., "720p", "1080p").