Need help with PiPer?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

220 Stars 25 Forks GNU General Public License v3.0 234 Commits 30 Opened issues


Browser extension that adds Picture in Picture support to YouTube, Netflix, Amazon Video, Twitch, Plex, and more!

Services available


Need anything else?

Contributors list

PiPer logo


PiPer is the browser extension to watch video Picture in Picture.

Install · Donate · Report an issue



  • Adds a dedicated Picture in Picture button to the video player of supported sites
  • Button integrates seamlessly with the player including hover effects and tooltips
  • Supports closed captions in Picture and Picture mode (Safari only)
  • Supports Safari and Chrome
  • Free and open source



Install from the Mac App Store by clicking "Get"
(The Safari Extension Gallery is now deprecated)


Install from the Chrome Web Store by clicking "Add to Chrome"

...or live life on the edge with the latest development build (IMPORTANT: these builds do not update automatically!)

Supported sites


You can find information about releases here




  • Operating system
    • macOS: 10.12 Sierra or newer (required to build Safari extension)
    • Windows: Vista or newer using Cygwin
    • Linux: 64-bit Ubuntu 14.04+, Debian 8+, openSUSE 13.3+, or Fedora Linux 24+
  • Software

Build tools

The following build tools are used to build the extension: * csso for compressing CSS * svgo for compressing SVG images * xarjs for packaging Safari legacy extension * google-closure-compiler for compiling JavaScript

These can be installed by executing the following command:

npm install -g csso-cli svgo xar-js google-closure-compiler


  1. Clone the repository
  2. Run
    1. By default this builds the unoptimized and unpackaged development version for all targets into the
    2. Alternatively:
      • ./ -p release
        to build the optimized release versions for all targets
      • ./ -p release -t chrome
        to build the optimized release version for the Chrome browser
      • ./ -h
        to see the full list of options

Supporting a new site

If we wanted to support
with the source:
Example caption
Play Fullscreen
We would start by adding a new file
in the resources directory: ```JavaScript export const domain = 'example';

export const resource = { buttonParent: function() { // Returns the element that will contain the button return document.querySelector('.video-controls'); }, videoElement: function() { // Returns the video element return document.querySelector('.video-container video'); },

// Optional captionElement: function() { // Returns the element that contains the video captions return document.querySelector('.video-captions'); }, };

We might want to style the button so that it integrates with the page better:
JavaScript export const resource = { ... // Assign a CSS class buttonClassName: 'control', // Scale the button buttonScale: 0.5, // Apply custom CSS styles buttonStyle: /** CSS / (` / Declaring CSS this way ensures it gets optimized when the extension is built / cursor: pointer; opacity: 0.5; `), // Apply a custom CSS hover style buttonHoverStyle: /* CSS */ (
opacity: 1 !important
), }; ``` For more examples, please see the source


We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.