PiP js Update video size based on Picture-in-Picture window size changes
<video id="video" src="https://example.com/file.mp4"></video>
<button id="pipButton"></button>
<script>
const video = document.getElementById("video");
const pipButton = document.getElementById("pipButton");
pipButton.addEventListener("click", async () => {
try {
await video.requestPictureInPicture();
} catch (error) {
// Video failed to enter Picture-in-Picture mode.
}
});
video.addEventListener("enterpictureinpicture", (event) => {
// Video entered Picture-in-Picture mode.
const pipWindow = event.pictureInPictureWindow;
updateVideoSize(pipWindow.width, pipWindow.height);
pipWindow.addEventListener("resize", onPipWindowResize);
});
video.addEventListener("leavepictureinpicture", (event) => {
// Video left Picture-in-Picture mode.
const pipWindow = event.pictureInPictureWindow;
pipWindow.removeEventListener("resize", onPipWindowResize);
});
function onPipWindowResize(event) {
// Picture-in-Picture window has been resized.
const { width, height } = event.target;
updateVideoSize(width, height);
}
function updateVideoSize(width, height) {
// TODO: Update video size based on pip window width and height.
}
</script>