# Picture-in-picture

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

Controls picture-in-picture mode.

## Import

```tsx
import { pipFeature } from '@videojs/react';
```

The `liveVideoFeatures` and `videoFeatures` [feature bundles](https://videojs.org/docs/framework/react/guides/presets) include this feature.

## API Reference

### State

| Property | Type | Description |
| --- | --- | --- |
| `pip` | `boolean` | Whether picture-in-picture mode is currently active. |
| `pipAvailability` | `'available' \| 'unavailable' \| 'unsupported'` | Whether picture-in-picture can be requested on this platform. |

### Actions

| Action | Type | Description |
| --- | --- | --- |
| `requestPictureInPicture` | `() => Promise<void>` | Enter picture-in-picture mode. |
| `exitPictureInPicture` | `() => Promise<void>` | Exit picture-in-picture mode. |
| `togglePictureInPicture` | `() => Promise<void>` | Toggle picture-in-picture mode. |

### Selector

Pass `selectPiP` to [`usePlayer`](https://videojs.org/docs/framework/react/reference/api/use-player) to subscribe to picture-in-picture state. Returns `undefined` if the PiP feature is not configured.

**PiPButton.tsx**

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

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

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

---

React documentation: https://videojs.org/docs/framework/react/llms.txt
All documentation: https://videojs.org/llms.txt