Skip to content
FrameworkStyle

Picture-in-picture

Picture-in-picture state and actions for the player store

Controls picture-in-picture mode.

API Reference

State

PropertyTypeDetails
pipboolean
pipAvailability'available' | 'unavailable' | 'unsupported'

Actions

ActionTypeDetails
requestPictureInPicture() => Promise<void>
exitPictureInPicture() => Promise<void>
togglePictureInPicture() => Promise<void>

Selector

Pass selectPiP to usePlayer to subscribe to picture-in-picture state. Returns undefined if the PiP feature is not configured.

import { selectPiP, usePlayer } from '@videojs/react';

function PiPButton() {
  const pip = usePlayer(selectPiP);
  if (!pip || pip.availability !== 'available') return null;

  return (
    <button onClick={pip.toggle}>
      {pip.active ? 'Exit PiP' : 'Picture-in-Picture'}
    </button>
  );
}