← All examples

Action Media

Video to picture-in-picture

Toolbar action that opens the largest video on the page in a floating picture-in-picture window or closes it.

Code to copy

// Toolbar action: pop the largest playing video into Picture-in-Picture.
(async function () {
  if (!document.pictureInPictureEnabled) {
    alert('Picture-in-Picture is not supported in this browser.');
    return;
  }
  if (document.pictureInPictureElement) {
    await document.exitPictureInPicture();
    return;
  }
  var videos = Array.prototype.slice.call(document.querySelectorAll('video'));
  videos.sort(function (a, b) {
    return (b.clientWidth * b.clientHeight) - (a.clientWidth * a.clientHeight);
  });
  var target = videos[0];
  if (!target) { alert('No video found on this page.'); return; }
  try { await target.requestPictureInPicture(); }
  catch (e) { alert('Could not start Picture-in-Picture: ' + e.message); }
})();

How to use this example

  1. Copy the code with the button above.
  2. Install JustZix (2 minutes) and open the extension on the target page.
  3. Add a new rule matching that page.
  4. Enable the action panel, add a button in the Actions tab and paste the code into it — run it with one click.

Rate this example

No ratings yet — be the first.

Does this example work?

Snippets are useless without somewhere to paste them.

JustZix takes 2 minutes to install and runs your code on every matching page. No account, no payment.

Download free See use cases