A snippet to enable video overlays

I quite like watching youtube videos while I'm coding, especially if it's a tutorial but unfortunately it means painstakingly sizing different windows so they don't go over the video 😡. Well, that problem is now solved with the requestPictureInPicture method on the HTMLVideoElement element.

Disclaimer: This is a simple step-by-step way of getting this to work, little tech jargon.

Something to do with overlays

The snippet #

You don't need to be a developer to get this to work, just follow these steps:

Prerequisites #

  • Make sure you're on a page that has a video on it. For example, if you want to watch a youtube video, go to the video and then follow these steps:
  • Check if your browser supports this, it won't work in Firefox or Internet Explorer.

1. Open DevTools #

Right-click on the page with the video on it* to see the popup menu and select the Inspect option or you can use the shortcut Ctrl+Shift+I.

*Don't right click on the video as this will show a different menu

2. Console #

Click on the Console tab.

3. Paste the snippet #

Copy the snippet below and paste it into the console (next to the little arrow) and hit Enter.

$('video').requestPictureInPicture();
The snippet for video overlay

4. Boom! You should now have the video overlay #

You should have the ability to resize the video as well as play or pause the video. More features may be available since this post.

If this isn't working, head over to the MDN page, to see if your browser has the ability to use this API.

Caveats #

  • Your browser might not support this, if you check the MDN page, it will tell you if you have the support for it.

Multiple videos on the page #

  1. If there are multiple videos on the page, it will play the first one. If you want to play a specific video, you can find the id or class of an element on the page by opening the DevTools and clicking on the icon:
  2. When you've clicked it, hover over the video you want to play in an overlay and click it. This will take you to the Elements tab and highlight the element.
  3. On the highlighted element, if there is an id="video2" (use this over class) or a class="video2", copy the bit in the place of "video2" (in this example, will be different on your video).
  4. Paste that value into the snippet and add the following before it '#' if it's a id or '.' if it's a class, like so:

For a video with an id #

$('#video2').requestPictureInPicture();
Video overlay with a video id

For a video with an class #

$('.video2').requestPictureInPicture();
Video overlay with a video class

A blog post always needs to end on a quote

Louie Colgan