Document Picture-in-Picture API

Document Picture-in-Picture is implemented behind a disabled-by-default feature flag in Chrome 105.0.5167.0 and later.

Enabling the Feature

To enable the document picture-in-picture feature, first check chrome://version to ensure that your Chrome version is at least 105.0.5167.0. Then, go to chrome://flags#document-picture-in-picture-api and enable the "Document Picture-in-Picture API" feature. It will prompt you to restart Chrome (you should).

Using the feature

To open a document picture-in-picture window, use the documentPictureInPicture.requestWindow() method with the feature enabled. You can optionally supply a couple of parameters to requestWindow():

  
    documentPictureInPicture.requestWindow({
      initialAspectRatio: (width / height), /* The initial aspect ratio of the window. */
      lockAspectRatio: true, /* True if the window should be forced to remain at the initial aspect ratio when resized. */
    }).then((pipWindow) => {
      pipWindow.document.append(someElement);
    });
  
  

Sample pages using the feature

Putting a video element into a document PiP window

Putting an IFrame element into a document PiP window

Copying CSS styles from the opener to the PiP window

Not yet implemented

The following features are not yet implemented as of Chrome 105.0.5167.0:

• "Back to tab" button
• setAspectRatio() method on the DocumentPictureInPictureSession object
• enterpictureinpicture/leavepictureinpicture events (though you can infer enterpictureinpicture when the Promise returned by requestWindow() resolves and infer leavepictureinpicture when the window's unload event fires)