Skip to main content

​
Features

  • Automatic conditional rendering based on browser API availability, customizable with the matcher pattern
  • Supports both the w3c standard (which most modern browsers support), as well as the older Safari/iOS spec (see the browsers which support Picture-in-Picture on caniuse)

​
Anatomy

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

export default () => (
  <Player.Root>
    <Player.Container>
      <Player.PictureInPictureTrigger />
    </Player.Container>
    <Player.Container>
      <Player.Controls>
        <Player.PictureInPictureTrigger />
      </Player.Controls>
    </Player.Container>
  </Player.Root>
);

​
Props

The component accepts all props suitable for a button element.

​
Data Attributes

​
data-livepeer-controls-picture-in-picture-trigger

Serves to identify the component’s role.

​
data-picture-in-picture

Indicates the current picture-in-picture state, "true" when the feature is active and "false" otherwise.

​
data-visible

Reflects the visibility status of the trigger, with "true" meaning it’s currently visible (i.e., picture-in-picture is supported and the media is not in fullscreen mode) and "false" denoting it’s not visible. This is often used for dynamically applying enter/exit CSS animations.