HTMLVideoElement.requestPictureInPicture()

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

videoElement.requestPictureInPicture();

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.

Examples

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

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

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
requestPictureInPicture
69
79
No
No
56
13.1
No
No
No
No
13.4
No

See also

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