W3cubDocs

/Web APIs

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.

EventTarget PictureInPictureWindow

Instance 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.

Instance methods

The PictureInPictureWindow interface doesn't inherit any methods.

Events

The PictureInPictureWindow interface doesn't inherit any events.

resize

Sent to a PictureInPictureWindow when the floating video window is resized.

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.

js

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 = () => {
  video.requestPictureInPicture().then((pictureInPictureWindow) => {
    pictureInPictureWindow.onresize = printPipWindowDimensions;
  });
};

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
PictureInPictureWindow 69 79 No No 56 13.1 No 105 No 72 13.4 20.0
height 69 79 No No 56 13.1 No 105 No 72 13.4 20.0
resize_event 69 79 No No 56 13.1 No 105 No 72 13.4 20.0
width 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/PictureInPictureWindow