W3cubDocs

/Web APIs

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

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 105 No 72 13.4 20.0

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/HTMLVideoElement/requestPictureInPicture