Picture in Picture is not just for videos

Picture-in-Picture has hit the mainstream browsers and background youtubeing has never been easier. However, there are more useful things to picture-in-picture than video.

Think food delivery. You order the food, alt tab back to Netflix, and then commence the awkward shuffle of keeping the delivery countdown on the screen while trying to maximize area used for video. What if instead you'd have a stylized, minimal picture in picture frame showing you the exact status of the order?

With some line connecting we can achieve just that. Let's create a canvas storing the order status, connect that to a <video>, and launch that as a picture-in-picture overlay.

Demo

This is unfortunately a Chrome-only demo. Firefox has yet to implement the requestPictureInPicture API.

order food trigger picture-in-picture

Uber Eats, Foodora, et al., are you listening?