The PictureInPictureWindow interface represents an object able to programmatically obtain the width and height and resize event of the floating video window.
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");functionprintPipWindowDimensions(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;});};