SlidesLive Picture-in-Picture

This bookmarklet enables Picture-in-Picture (PiP) in Safari browser for slideslive.com presentations.

Enabling PiP for a video is not complicated, it works out-of-the-box in Safari, but I wanted to display the slides alongside the video as well.

Usage

Click here to access the bookmarklet:

https://gmatt.github.io/slideslive-picture-in-picture/

Open the page above and drag the blue box to the bookmarks bar (enable the bookmarks bar in Safari with View > Show Favorites Bar), or otherwise refer to this guide.

Development

• prerequisites
  • nodejs
    • I use package-lock v3, which requires at least npm v7 or equivalently at least node v15.
• initialize

  • cd slideslive-picture-in-picture
    npm install

• build

  • npm run build

  • The output will be in dist/index.html.
  • GitHub Actions builds and deploys the changes on push to the main branch.

Troubleshooting

• build
  • error: ERR_OSSL_EVP_UNSUPPORTED

    • export NODE_OPTIONS=--openssl-legacy-provider