PipButton

A button that moves the video into a floating picture-in-picture window and back.

import { PipButton } from 'react-media-kit'

import { PipButton } from 'react-media-kit'

<PipButton.Root className="pip">Picture-in-picture</PipButton.Root>

.pip[data-pip-unsupported] {
  display: none;
}

Render it inside Player.Root, next to a Media.Video or Media.Audio.

Anatomy

<PipButton.Root />

API reference

It accepts the attributes of the <button> it renders, plus a ref, and sets the media state attributes. Passing aria-label replaces a default label.

PipButton.Root

renders <button>

Moves the video into picture-in-picture and back. Its aria-label is "Enter picture-in-picture", or "Exit picture-in-picture" while active.

Data attribute	Description
data-pip	The video is playing picture-in-picture.

Your onClick runs before the built-in one; call event.preventDefault() in it to skip the built-in behavior.

Media state attributes

Five of these describe loading, and exactly one of them is set at a time. The other three mark features the browser lacks. Use them to hide controls that can’t work, or to style the player while it loads.

Data attribute	Description
data-media-pending	Loading hasn’t started. This is the initial state.
data-media-loading	The media has started loading.
data-media-metadata-loaded	The duration and dimensions are known, but there isn’t enough data to play yet.
data-media-playable	The media can play. It stays set if playback later stalls to buffer.
data-media-error	The media element reported an error, such as a network or decoding failure. A blocked `play()` call doesn’t set it; use `onError` for that.
data-fullscreen-unsupported	The browser can’t go fullscreen, or support hasn’t been detected yet.
data-pip-unsupported	Picture-in-picture isn’t available, such as for audio, or support hasn’t been detected yet.
data-volume-change-unsupported	The browser doesn’t let scripts set the volume, such as on iOS, or support hasn’t been detected yet.