PiP js monitor code example

Example: 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>