Container

​

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 Broadcast from "@livepeer/react/broadcast";

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

​

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").