PictureInPictureWindow: resize event

The resize event fires when the floating video window has been resized.

Bubbles No
Cancelable No
Interface PictureInPictureWindow
Event handler property onresize

Examples

Window size logger

<p>Resize the floating video window to fire the <code>resize</code> event.</p>
<p>Window height: <span id="height"></span></p>
<p>Window width: <span id="width"></span></p>
<video id="video" src="" muted autoplay></video>
const video = document.querySelector('#video');
const heightOutput = document.querySelector('#height');
const widthOutput = document.querySelector('#width');

function resize(evt) {
  heightOutput.textContent = evt.target.width;
  widthOutput.textContent = evt.target.width;
}

video.requestPictureInPicture()
  .then(pictureInPictureWindow => {
    pictureInPictureWindow.onresize = resize;
  });

addEventListener equivalent

You could set up the event handler using the addEventListener() method:

pictureInPictureWindow.addEventListener('resize', resize);

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
resize_event
69
79
No
No
56
13.1
No
No
No
No
13.4
No

See also

© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/PictureInPictureWindow/resize_event