HTMLVideoElement: requestPictureInPicture() method

The HTMLVideoElement method requestPictureInPicture() issues an asynchronous request to display the video in picture-in-picture mode.

It's not guaranteed that the video will be put into picture-in-picture. If permission to enter that mode is granted, the returned Promise will resolve and the video will receive a enterpictureinpicture event to let it know that it's now in picture-in-picture.

Syntax

js

requestPictureInPicture()

Parameters

None.

Return value

A Promise that will resolve to a PictureInPictureWindow object that can be used to listen when a user will resize that floating window.

Exceptions

SecurityError DOMException

Use of this feature was blocked by a Permissions Policy.

Security

Transient user activation is required. The user has to interact with the page or a UI element for this feature to work.

Examples

This example requests that the video enters Picture-in-Picture mode, and sets an event listener to handle the floating window resizing.

js

function enterPictureInPicture() {
  videoElement.requestPictureInPicture().then((pictureInPictureWindow) => {
    pictureInPictureWindow.addEventListener(
      "resize",
      () => onPipWindowResize(),
      false
    );
  });
}

Specifications

Specification
Picture-in-Picture
# request-pip

Browser compatibility

BCD tables only load in the browser

See also