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
Disclaimer: This is a simple step-by-step way of getting this to work, little tech jargon.
The snippet #
You don't need to be a developer to get this to work, just follow these steps:
- 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
*Don't right click on the video as this will show a different menu
2. Console #
Click on the
3. Paste the snippet #
Copy the snippet below and paste it into the console (next to the little arrow) and hit
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.
- 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 #
- 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
classof an element on the page by opening the DevTools and clicking on the icon:
- 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
Elementstab and highlight the element.
- 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).
- Paste that value into the snippet and add the following before it '#' if it's a
idor '.' if it's a class, like so:
For a video with an id #
For a video with an class #
A blog post always needs to end on a quote