Video PiP (Picture-in-Picture) Enabler Bookmarklet

  • report
    Disclaimer
    Click for Disclaimer
    This Custom Built Tool is over a year old (first published about 4 years ago). As such, please keep in mind that some of the information may no longer be accurate, best practice, or a reflection of how I would approach the same thing today.
  • infoFull Custom Built Tool Details
    info_outlineClick for Full Custom Built Tool Details
    Date Posted:
    Aug. 21, 2020
    Last Updated:
    Aug. 21, 2020
  • classTags
    classClick for Tags

Vid Popper Bookmarklet

This tool is pretty simple. It is a bookmarklet (bookmark that executes a tiny bit of JavaScript when clicked) that removes any HTML attributes or JavaScript properties that might try and prevent the use of PiP, and then automatically pops out the first playing video on the page, or if on Hulu, the main video player.

This enables PiP mode on Hulu, on both Firefox and Chrome.

This tool will override the disabled elements in both Firefox and Chrome, but will only auto-pop the videos in Chrome, since Firefox does not yet support requestPictureInPicture(). See this page for how to manually pop videos in Firefox.

If you are still unable to use PiP, make sure you have the newest version of your browser, that your browser supports PiP, and that it is not disabled behind a feature-flag. See details for Firefox, and details for Chrome.

Usage:

You can find the source code here.

Or, more simply, drag this bookmark to your toolbar and click it when on a site you want to use PiP on: Vid Popper

Background

I am a huge fan of browsers offering PiP (picture-in-picture) for video playback. I often watch videos while I tinker on the computer, picking shows that are light in plot and I can kind of tune in & out of while I do things, and PiP is perfect for this. It lets me shrink a video down as small as possible, so I can put the majority of my focus on the task at hand, but also keep the video on top, as I move windows around.

I recently noticed that for Hulu, despite PiP being available and working on Firefox, PiP options were curiously absent on Chrome. I figured Firefox probably just had more of the spec implemented and didn’t think much of it, until it started to bother me and I decided to poke around the webpage.

I quickly noticed that Hulu had actually added some overrides to their video elements to purposely disable PiP support – namely an HTML attribute (disablePictureInPicture) as well as JavaScript properties. The reason why it was working in Firefox but not Chrome, is that the overrides are part of the spec that is still “up in the air” so speak (more accurately, marked as “experimental”), and Chrome is currently honoring them, while Firefox is not.

Leave a Reply

Your email address will not be published.