Skip to main content
PiPButton toggles picture-in-picture (PiP) mode. It detects platform support through an availability state — when PiP is "unsupported", the toggle does nothing.
Requires the pip feature to be registered with the player.

​
Import

import { PiPButton } from '@videojs/react';

​
Basic Usage

import { PiPButton } from '@videojs/react';

function PlayerControls() {
  return <PiPButton />;
}

​
Custom Render

import { EnterPiPIcon, ExitPiPIcon } from './icons';
import { PiPButton } from '@videojs/react';

function PlayerControls() {
  return (
    <PiPButton
      render={(props, state) => (
        <button {...props}>
          {state.pip ? <ExitPiPIcon /> : <EnterPiPIcon />}
        </button>
      )}
    />
  );
}

​
Props

​
render
ReactElement | ((props: HTMLProps, state: PiPButton.State) => ReactElement | null)
Custom render prop. Receives the computed HTML props and current state.
​
label
string | ((state: PiPButton.State) => string)
Override the automatic aria-label. By default: "Enter PiP" or "Exit PiP".
​
disabled
boolean
Disables the button.
​
className
string | ((state: PiPButton.State) => string)
CSS class name or a function that receives state and returns a class name.
​
style
CSSProperties | ((state: PiPButton.State) => CSSProperties)
Inline style or a function that receives state and returns a style object.

​
State Data Attributes

AttributeValue / Description
data-pipPresent when picture-in-picture mode is active.
data-availability"available" | "unavailable" | "unsupported" — platform support status.

​
CSS Styling Example

/* Hide when unsupported */
.pip-button[data-availability="unsupported"] {
  display: none;
}

/* Style when in PiP mode */
.pip-button[data-pip] {
  color: white;
}

​
Accessibility

Renders a <button> element. The aria-label updates automatically: "Enter PiP" or "Exit PiP". Keyboard activation: Enter / Space.

Build docs developers (and LLMs) love

Get started for freeTalk to us