Picture-in-Picture on Disney+

Disney+ disables Picture-in-Picture, but fortunately it's fairly straight forward to turn it back on since it's using a standard HTML <video> element.

It's a bit more fiddly because of the way the videos are injected into the page, we can't just alter the <video> element on page load. We have to wait for the element to be injected and then do our thing.

This is a userscript. It's designed to be run with a browser extension like Tampermonkey. If you have the extension then you can install the script from this Github gist.

There's not much to the userscript, here's an explanation of what it is doing:

// @file: js
(function () {
  // This is the element we want to monitor.
  const targetNode = document.getElementById('app_index');

  // Mutation Observers are a cool way to watch elements for changes.
  const observer = new MutationObserver((mutationsList, observer) => {
    mutationsList.forEach((item) => {
      // Disney+ injects the video element and then adds the autoplay attribute, so...
      // When an item gets an 'autoplay' attribute...
      if (item.type === 'attributes' && item.attributeName === 'autoplay') {
        // ... set the 'disablePictureInPicture' attribute to false.
        item.target.disablePictureInPicture = false;
      }
    });
  });

  // Tell our observer to monitor changes in attributes, and within child elements.
  observer.observe(targetNode, {
    attributes: true,
    childList: true,
    subtree: true,
  });
})();

And that's it. It might break in the future, who knows, but for now it does the job.