PictureInPictureWindow

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

ThePictureInPictureWindow interface represents an object able to programmatically obtain thewidth andheight andresize event of the floating video window.

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

Instance properties

ThePictureInPictureWindow interface doesn't inherit any properties.

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

Instance methods

ThePictureInPictureWindow interface doesn't inherit any methods.

Events

ThePictureInPictureWindow interface doesn't inherit any events.

resize: Sent to aPictureInPictureWindow 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.

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;  });};