PictureInPictureWindow.onresize

The onresize property of the PictureInPictureWindow interface is an event handler that processes PictureInPictureWindow.resize events.

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

Syntax

pictureInPictureWindow.onresize = functionRef;

Value

functionRef is a function name or a function expression. The function receives a FocusEvent object as its sole argument.

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" muted autoplay src=""></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;
  });

Specifications

Specification
Picture-in-Picture # dom-pictureinpicturewindow-onresize

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