Request picture in picture on first found video that is playing #bookmarklet

request-picture-in-picture.js

javascript: void ((function() {
  /** @type {NodeListOf<HTMLIFrameElement>} */
  const iFrames = window.document.querySelectorAll('iframe');

  /** @type {Document[]} */
  const allDocuments = [
    window.document,
    ...Array.from(iFrames)
      .map(i => i.contentDocument)
      /**
       * some iFrames have `null` contentDocument
       * one reason for this is because of not Same-Origin policy
       */
      .filter(Boolean)
  ];

  /** @type {HTMLVideoElement[]} */
  const allVideos = allDocuments.flatMap(d => Array.from(d.querySelectorAll('video')));
  /** @type {HTMLVideoElement} */
  const playingVideo = allVideos.find(v => !v.paused);

  if (playingVideo) {
    playingVideo.requestPictureInPicture();
  }
})());