Looking for the old docs? Go here

Buttons

PIP Button

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

HTMLAttributes<HTMLButtonElement>
Ref<HTMLButtonElement>

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

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

<PIPButton>
  {!isActive ? <EnterIcon /> : <ExitIcon />}
</PIPButton>
const isActive = useMediaState('pictureInPicture');

<PIPButton>
  {!isActive ? <EnterIcon /> : <ExitIcon />}
</PIPButton>
PropTypeDefault
asChild
boolean
false
children
ReactNode
null
disabled
boolean
undefined
CallbackType
onMediaEnterPipRequest
function
onMediaExitPipRequest
function
NameDescription
data-active
Whether picture-in-picture mode is active.
data-supported
Whether picture-in-picture mode is available.