Looking for the old docs? Go here

Buttons

PIP Button

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

This page is not ready yet, we’re working on getting it done for the 1.0 release. It should be available soon! In the meantime, feel free to use the API reference tables below.

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
NameDescription
data-activeWhether picture-in-picture mode is active.
data-supportedWhether picture-in-picture mode is available.