PiP-ify All the Things!

If you're also someone who enjoys multitasking and use an Apple computer, you might find yourself lamenting lack of support for "Picture-In-Picture" in Safari on every site out there (looking at you, HBO Max!)

Here's a solution: Let's create a bookmark that will create a simple button on any site, that will trigger PiP on the first HTML5 video-element it finds.

The bookmark

As we're not able to manually create bookmarks in Safari anymore (!), we'll first have to add a new bookmark that we'll edit later.

Press CMD + D on your keyboard, and add the bookmark; Make sure you save it under "☆ Favorites" (the one with a star-sign in front of the name in the drop-down-menu). Just name it PiP for now.

Then, identify the bookmark in your "Favorites Bar" – if you can't see it at the top of your Safari window, below the URL / address bar, select the "View" menu and click "Show Favorites Bar". Right click the bookmark, and click "Edit address..."

Paste the following:

javascript:(function() { if (document.getElementById('pip-bm-btn')) { document.getElementById('pip-bm-btn').remove(); } else { const button = document.createElement('button'); button.id = 'pip-bm-btn'; button.innerText = 'PiP'; button.addEventListener('click', () => { document.querySelector('video').requestPictureInPicture() }); document.body.appendChild(button); button.style.position = 'fixed'; button.style.zIndex = 10000; button.style.top = 0; button.style.left = 0; button.style.backgroundColor = "#dadada"; button.style.color = "black"; button.style.fontFamily = "system-ui" ; button.style.fontSize = "11px" ; button.style.fontWeight = 400 ; button.style.margin = "2px" ; button.style.padding = "2px" ; button.style.borderRadius = "4px"; button.style.border = "1 px solid black"; } }());

and click "Done".

You should now be able to click the "PiP"-bookmark on any page with an HTML5 video element to trigger "Picture-In-Picture". If you want to get rid of the button without refreshing the page, you can just click the link again.


Update October 31st 2022

If you don't want to deal with the above, I've created an https://github.com/EivindArvesen/pipify that will trigger PiP-mode on the first HTML5 video on any web page.

Because of API limitations, however, any such video must have been interacted with by the user at least once before the button will work.

Tags

Older post
Stable Diffusion setup for Apple Silicon-based Macs