# Picture-in-picture

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

Controls picture-in-picture mode.

## Import

```ts
import { pipFeature } from '@videojs/html';
```

The `liveVideoFeatures` and `videoFeatures` [feature bundles](https://videojs.org/docs/framework/html/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 [`PlayerController`](https://videojs.org/docs/framework/html/reference/api/player-controller) to subscribe to picture-in-picture state. Returns `undefined` if the PiP feature is not configured.

**pip-button.ts**

```ts
import { createPlayer, UIElement, selectPiP } from '@videojs/html';
import { videoFeatures } from '@videojs/html/video';

const { PlayerController } = createPlayer({ features: videoFeatures });

class PiPButton extends UIElement {
  readonly #pip = new PlayerController(this, selectPiP);
}
```

---

HTML documentation: https://videojs.org/docs/framework/html/llms.txt
All documentation: https://videojs.org/llms.txt