The resize
event fires when the floating video window has been resized.
This event is not cancelable and does not bubble.
The resize
event fires when the floating video window has been resized.
This event is not cancelable and does not bubble.
Use the event name in methods like addEventListener()
, or set an event handler property.
js
addEventListener("resize", (event) => {}); onresize = (event) => {};
A PictureInPictureEvent
. Inherits from Event
.
In addition to the properties listed below, properties from the parent interface, Event
, are available.
PictureInPictureEvent.pictureInPictureWindow
Returns the PictureInPictureWindow
that is resized.
html
<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>
js
const video = document.querySelector("#video"); const heightOutput = document.querySelector("#height"); const widthOutput = document.querySelector("#width"); function resize(evt) { heightOutput.textContent = evt.target.height; widthOutput.textContent = evt.target.width; } video.requestPictureInPicture().then((pictureInPictureWindow) => { pictureInPictureWindow.onresize = resize; // or pictureInPictureWindow.addEventListener("resize", resize); });
Specification |
---|
Picture-in-Picture # eventdef-pictureinpicturewindow-resize |
Picture-in-Picture # dom-pictureinpicturewindow-onresize |
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 | 105 | No | 72 | 13.4 | 20.0 |
© 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/resize_event