PiP js monitor
<!-- Monitor PiP changes -->
<video id="video" src="https://example.com/file.mp4"></video>
<script>
const video = document.getElementById("video");
video.addEventListener("enterpictureinpicture", (event) => {
// Video entered Picture-in-Picture mode.
const pipWindow = event.pictureInPictureWindow;
console.log(<code data-opaque bs-autolink-syntax='`Picture-in-Picture window width: ${pipWindow.width}`'>Picture-in-Picture window width: ${pipWindow.width}</code>);
console.log(<code data-opaque bs-autolink-syntax='`Picture-in-Picture window height: ${pipWindow.height}`'>Picture-in-Picture window height: ${pipWindow.height}</code>);
});
video.addEventListener("leavepictureinpicture", () => {
// Video left Picture-in-Picture mode.
});
</script>