PiPify: One-Click Picture-In-Picture

Drag the “PiPify” link below into your bookmarks bar:

PiPify

Then, on any page with a <video> element, click it to have the video appear on top of any windows; perfect for seeing video call participants while you're taking notes in a different application.

Try it out

Try clicking “PiPify” above to see it in action. Note that on iOS, JavaScript cannot invoke picture-in-picture.

Courtesy notice: the video above is 3.2mb in size. Clicking “PiPify” will download and play it.

How does it work?

This bookmarklet runs a simple JavaScript function: 

function pipify() {
  // Checks for native support
  if (!("pictureInPictureEnabled" in document)) {
    alert("Browser does not support picture-in-picture");
    return;
  }

  // Select the first video element on the page
  const firstVideo = document.querySelector("video");

  // Return if there's no element
  if (firstVideo === null) {
    alert("No video element found");
    return;
  }

  // Request PiP for the video
  firstVideo.requestPictureInPicture();
}

It leverages the browser's native “picture-in-picture” functionality to display playing video on top of other windows. You can read more about this behaviour in the W3C specification for it.