mail
Jun 18 js / macro

Microbe: Everyone get's Picture-in-Picture mode

This is first of the many posts (hopefully) I will create in the "Microbe" series. It also happens to be my very first blog post here and I hope you learn something other than me justifying my terrible marks in english in this piece of writing. On that note let's dive right in.

Microbe :: microscopic, single-celled organisms like bacteria and fungi. That's the most lucid definition and also the first google search result (#SEOmatters).

Welcome to
Well keeping the context, a microbe blog topic is considered as a TIL topic. Purpose of these type of articles is to be able to read them in even the most busiest of work days in a couple of minutes. So let's get rolling .

Picture in Picture API

Before we dive into the API, let's see a demo of what we're dealing with here:

PiP in Chrome

Fig: Youtube natively supports PIP. right click twice and select PIP mode.

PS: Song Recommendation: Checkout the fire rap duo seedhe maut as well.

What is It?

The Picture-in-Picture API allow websites to create a floating window out of a video, always on top of other windows so that users may continue consuming media while they interact with other content sites, or applications on their device.

Keyword from above is <video /> i.e. HTMLVideoElement is the only HTML element on which this interface method is exposed.

Essentially the usecase is to maximize screen-space while navigating away from a page with the restriction of only being able to be played in the minimized window. So mundane apps that we use on a daily basis like google meet, youtube etc. can essentially use this feature.

Now this feature is not natively supported in all applications. Which brings me to the snippet you can use to make any video go into PIM.. ah, PIP mode:

console tricks: selects the first video in the page and shows in PIP

var selectedVideo = document.getElementsByTagName('video')[0]; // selects the first video, can also select by classname/id if multiple videos are playing on the same page
selectedVideo.disablePictureInPicture = false // enable pip mode 
await selectedVideo.requestPictureInPicture() // enjoy PIP

PiP in everywhere

Fig: Using the snippet on Hotstar (popular Indian streaming platform)

Cross browser support

Can I use

NOTE: Support for it is still in it's early stage as of the date of writing the article from the POV of browsers. Although latest versions of chrome, safari and edge support it, firefox still has partial support.