Web/API/PictureInPictureWindow

The PictureInPictureWindow interface represents an object able to programmatically obtain the width and height and resize event of the floating video window.

An object with this interface is obtained using the HTMLVideoElement.requestPictureInPicture() promise return value.

Properties

The PictureInPictureWindow interface doesn't inherit any properties.

PictureInPictureWindow.width Read only: Determines the width of the floating video window.
PictureInPictureWindow.height Read only: Determines the height of the floating video window.

Methods

The PictureInPictureWindow interface doesn't inherit any methods.

Events

'The PictureInPictureWindow interface doesn't inherit any events.'

PictureInPictureWindow.resize: Sent to a PictureInPictureWindow when the floating video window is resized. The associated event handler is PictureInPictureWindow.onresize.

Examples

Given a <button> and a <video>, clicking the button will make the video enter the picture-in-picture mode; we then attach an event to print the floating video window dimensions to the console.

const button = document.querySelector("button");
const video = document.querySelector("video");

function printPipWindowDimensions(evt) {
  const pipWindow = evt.target;
  console.log(`The floating window dimensions are: ${pipWindow.width}x${pipWindow.height}px`);
  // will print:
  // The floating window dimensions are: 640x360px
}

button.onclick = function() {
  video.requestPictureInPicture().then(pictureInPictureWindow => {
    pictureInPictureWindow.onresize = printPipWindowDimensions;
  });
};

Specifications

Specification	Status	Comment
Unknown	Unknown	Initial specification.

Browser compatibility

No compatibility data found. Please contribute data for "api.PictureInPictureWindow" (depth: 1) to the MDN compatibility data repository.