Woah! I've been enlightened by my husband a neat little trick to get a floating video player off any website that will stay on top of all your windows while you're interacting with other sites, applications, etc. No more resizing my windows, no more playing videos on a separate monitor/device. Just a simple click to pop out the video and continue my work.
For everyone who wants this now, here's how:
- In Chrome, open up a video, like this YouTube video 😉 and replace the URL with
But remembering that bit of code and typing it into your URL bar every time seems a bit annoying right? So let's save it as a bookmarklet.
- In Chrome, make a new bookmark. (Ctrl + Shift + O, then click on the three dots in the upper-righthand corner and click "Add New Bookmark").
- Add a name (like "Floating Player") and set the URL to
- Great! Now back to the video 😉. This time click on your bookmarklet to pop the video out!
<video> elements and then on the first
As I mentioned, you can use the
Let's try it out. In the URL bar, type
getElementsByTagName('video') method on the
document to get an HTMLCollection of the elements with a
<video> tag. Since it will return an array-like object, we will use bracket notation
 to target the first
<video> returned by the DOM (Document Object Model) API.
Great now that we have the video element, you can add the
requestPictureInPicture() method to request the display the video in picture-in-picture mode, which we've seen will return a floating player that stays on top of websites and applications.
And that's it! Anyways go forth and enjoy!