DEV Community

Cover image for Create your own Picture-In-Picture video feature bookmarklet
Tim Bryan
Tim Bryan

Posted on • Edited on

2

Create your own Picture-In-Picture video feature bookmarklet

Cover image by charlesdeluvio

...

Some websites & video streaming services have a feature that allows you to watch videos in Picture-in-Picture mode, but they lock this feature behind some kind of paywall or make it a perk of having a subscription.

Some websites just don't have this feature altogether!

I find this infuriating, as this is a feature that is built into all modern web browsers and is free to use for those who know how to do it with no special effort, purchases, plugins or hack.

Here's how to do it:

Option 1 - Enter the code via your web browsers dev tools

  • Open your web browser's dev tools ( usually press F12 key / right-click & choose Inspect Element)
  • Go to the Console tab
  • Paste the following code:
// find the video element (may not work on sites with multiple video elements, but works for most of the main sites)
var vid = document.querySelector("video");

// remove the attribute that might stop us from launching the video in PiP
vid.removeAttribute("disablePictureInPicture");

// finally, request the PiP
vid.requestPictureInPicture();
Enter fullscreen mode Exit fullscreen mode

All being well, you should now have the video pop-out. If not, you may need to tweak document.querySelector("video") to select a specific video element on the page.

Option 2 - Create a Bookmark button to launch PiP

This code is the same as the example in Option 1, but stripped down to one line to one line so it can be executed as a URL.

To use it, simply:

  • Select all of the following and drag and drop into your browser's bookmarks bar, or
  • Create a new bookmark called PiP and paste the following as the bookmark's URL: javascript: var vid=document.querySelector('video');vid.removeAttribute('disablePictureInPicture');vid.requestPictureInPicture();
  • Click the bookmark to launch PiP

How does a "Bookmarklet" work?

A bookmark normally takes you to a new web page. A bookmarklet is a bookmark that runs javascript on the current page instead of taking you to a new page. To declare that it is a bookmarklet, the "location" it points to starts with javascript:.

caseywatts

The magic here, is the addition of javascript to the beginning of the URL. This tells the browser to perform an action on the current page, rather than taking you to a new page.

For more info on bookmarklets and getting more creative with them, see this great explanation from @caseywatts on Making Bookmarklets

...

Original article: https://timbryandev.dev/posts/free-picture-in-picture

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (1)

Collapse
 
roshan_khan_28 profile image
roshan khan

that was great write for PIP feature. awesome!

Cloudinary image

Zoom pan, gen fill, restore, overlay, upscale, crop, resize...

Chain advanced transformations through a set of image and video APIs while optimizing assets by 90%.

Explore

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay