Picture-in-Picture

The player's PiP is a CSS-based floating overlay, not the native browser Picture-in-Picture API. When active, the player container becomes position: fixed in the bottom-right corner and is draggable by the user. Native browser PiP is explicitly disabled on the underlying <video> element.

player.isPip;          // boolean (read-only)
player.requestPip();    // activate the overlay (no-op if already active)
player.exitPip();       // restore the player in-flow (no-op if not active)
player.on('pipchange', ({ isPip }) => console.log(isPip));

The pip constructor option (default true) only controls whether the control-bar button is shown; the methods above work regardless.

In-flow placeholder

Because the container leaves the document flow while it floats, a placeholder (.vjsp-pip-placeholder) is inserted where the player sat, sized to match the player at the moment PiP is activated so the surrounding page doesn't jump. It shows the pipPlaceholderText constructor option, centered:

new EvePlayer(el, {
  pipPlaceholderText: 'Video is playing in picture-in-picture', // default
});

Pass an empty string for a blank placeholder that still reserves the space. The text is wrapped in .vjsp-pip-placeholder-text for styling.

Theming the overlay

The overlay size, radius and shadow are CSS custom properties, see Theming:

Property	Default
--eve-pip-width	340px
--eve-pip-radius	10px
--eve-pip-shadow	0 12px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08)