Quick Picture in Picture Bookmarklet

Picture in Picture is an amazing API, it let’s you keep on working in another tab but have a little playable live thumbnail of the video on the screen for you to keep up with. Yet there are a number of sites that disable the feature.

I just wanted a quick and easy access button that I can press in my browser that will just PIP the video. So I made a bookmarklet.

Just drag the link to you Bookmark bar and when you press it, the currently playing video will be put in to Picture in Picture mode.

Quick PIP

If it tickles your fancy, the code is below.

// dont define a variable on scope. Only pip the first video

[
  document,
  ...[...document.querySelectorAll("iframe")]
    .map(iframe => iframe.contentDocument)
    .filter(iframe => !!iframe)
].some(d =>
  [...d.querySelectorAll("video")]
    .filter(video => video.paused == false && video.ended == false)
    .some(
      video => !!video.requestPictureInPicture().catch(err => console.log(err))
    )
);

Why one line? Well, Bookmarklets run their code in the local scope, and I worry about adding new variables on to the global object that might clash with others on the current page.

The above code will find the first video that is playing in either the document or an iframe that is on the same origin.

First we build a list of valid documents, then for each document (using some) we check to see if there are any videos that are currently playing and then using some will requestPictureInPicture.ย 

The use of some is interesting because it means that we don’t need to iterate over each video in each document, instead the first document to contain a playing video will be Picture in Pictured.

That was a fun 30 minutes :D

Picture of me smiling.

Paul Kinlan

Trying to make the web and developers better.

RSS Github Medium

Likes

Denis Lemire Alexey Rodionov Mike Bramus! Kiran Sonley Tony Carr Izzy catherine potato Liad Yosef l | parkers father figure F S Changhwan Yi (์ด์ฐฝํ™˜) Dr Sadoc Maximo Cozetti Jamie Oliver Ash Bartosz Podlewski ๐Ÿท Jabran Rafique uskay Rohit ๐Ÿ‘จ๐Ÿปโ€๐Ÿ’ป Joseph Huckaby matheus โ€ข โœŠ๐Ÿฝ ๐ŸŒน Ivan Kutil Wiktor Olejniczak Adrien Picard Hervรฉ Tutuaku sidasa Wills Bithrey SWAMY TH Dion Almaer Jake Adam Argyle Ryan Matt Wilcox Rowan Merewood Lars Knudsen in ๐Ÿ‡ฉ๐Ÿ‡ฐ Oscar Eiji Kitamura / ใˆใƒผใ˜ ๐“ž ๐“— ๐“’๐“ช๐“ถ๐“ผ๐“ฑ๐“ช๐“ฏ๐“ฝ Lasse Korsgaard Tim Lewis N Samriddha Narayan Singh Yoshi Yamaguchi ๐Ÿ‡ฏ๐Ÿ‡ต Hyeseong Kim Experimental Web Tibor Martini X ร† C-3PO Chirag Jain David O'Halloran

Reposts

Tony Carr Jabran Rafique Ivan Kutil Eiji Kitamura / ใˆใƒผใ˜ George Salibยฎ Chrome Developers Experimental Web Hyeseong Kim

Comments and Replies

Andreas BovensAndreas Bovens
That's why we made Picture-in-Picture a user-invoked action in Firefox, so that it works on all videos ๐Ÿ™‚ hacks.mozilla.org/2020/01/how-weโ€ฆ
Paul KinlanPaul Kinlan
I believe it's intentional.
Alexey RodionovAlexey Rodionov
Should I open issue about this or is this by design? ๐Ÿค” BTW, on desktop you can easily PiP the video using Chrome media hub (without this bookmarklet). xda-developers.com/google-chrome-โ€ฆ
Alexey RodionovAlexey Rodionov
Brilliant! How about removing disablePictureInPicture along the way? ๐Ÿ˜‰ It's pretty sad that for some reason this bookmarklet doesn't work in Chrome for Android, since it doesn't support extensions. Is this a bug in Chrome for Android?
Paul KinlanPaul Kinlan
Yeah, bookmaklets don't run on Android.
Hemanth.HMHemanth.HM
Nice! I have a similar one in my saved snippets, bookmarklets FTW!
Paul KinlanPaul Kinlan
yeah, I don't install extensions when I can help it.
X ร† C-3POX ร† C-3PO
I love it ๐Ÿ˜‰
Ingvar StepanyanIngvar Stepanyan
There is an extension for that under GoogleChromeLabs github :) twitter.com/RReverser/statโ€ฆ