W3cubDocs

/Web APIs

DocumentPictureInPicture

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The DocumentPictureInPicture interface of the Document Picture-in-Picture API is the entry point for creating and handling document picture-in-picture windows.

It is accessed via the Window.documentPictureInPicture property.

EventTarget DocumentPictureInPicture

Instance properties

window Read only Experimental

Returns a Window instance representing the browsing context inside the Picture-in-Picture window.

Instance methods

requestWindow() Experimental

Opens the Picture-in-Picture window for the current main browsing context. Returns a Promise that fulfills with a Window instance representing the browsing context inside the Picture-in-Picture window.

Events

enter Experimental

Fired when the Picture-in-Picture window is successfully opened.

Examples

js

const videoPlayer = document.getElementById("player");

// ...

// Open a Picture-in-Picture window.
const pipWindow = await window.documentPictureInPicture.requestWindow({
  width: videoPlayer.clientWidth,
  height: videoPlayer.clientHeight,
});

// ...

See Document Picture-in-Picture API Example for a full working demo (see the full source code also).

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
DocumentPictureInPicture 116 116 No No 102 No No No No No No No
enter_event 116 116 No No 102 No No No No No No No
requestWindow 116 116 No No 102 No No No No No No No
window 116 116 No No 102 No No No No No No No

See also

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/DocumentPictureInPicture