Buttons

PIP Button

This component is used to enter and exit picture-in-picture mode on press.

API Reference

HTMLAttributes<HTMLButtonElement>

Ref<HTMLButtonElement>

A button for toggling the picture-in-picture (PIP) mode of the player.

import { PIPButton, type PIPButtonProps } from "@vidstack/react"; const isActive = useMediaState('pictureInPicture');

<PIPButton>
  {!isActive ? <EnterIcon /> : <ExitIcon />}
</PIPButton> 

Props

Prop	Type	Default
`asChild`	`boolean`	`false`
`children`	`ReactNode`	`null`
`disabled`	`boolean`	`undefined`

Callbacks

Callback	Type
`onMediaEnterPipRequest`	`function`
`onMediaExitPipRequest`	`function`

Data Attributes

/* Example. */
.component[data-foo] {}

Name	Description
`data-active`	Whether picture-in-picture mode is active.
`data-supported`	Whether picture-in-picture mode is available.

PIP Button

API Reference

Props

`asChild`

`children`

`disabled`

Callbacks

`onMediaEnterPipRequest`

`onMediaExitPipRequest`

Data Attributes

`data-active`

`data-supported`