Easiest Chrome Floating Video Player Ever!
Tags: beginners, webdev, javascript, tutorial
Published: 2020-11-16 13:57:32

*Woah!* I've been enlightened by [my husband](https://twitter.com/m_ninepoints/status/1327859081680306177) 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.

## Setup & Usage

For everyone who wants this now, here's how:
1. In Chrome, open up a video, like this [YouTube video](https://www.youtube.com/watch?v=dQw4w9WgXcQ) :wink: and replace the URL with `javascript:document.getElementsByTagName('video')[0].requestPictureInPicture();` Once the video pops out, you can move it, resize it, etc! 
![Picture-in-Picture Demo](https://dev-to-uploads.s3.amazonaws.com/i/jqvcwqmhmklxg2rjv7xh.png)

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.

1. 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").
2. Add a name (like "Floating Player") and set the URL to `javascript:document.getElementsByTagName('video')[0].requestPictureInPicture();`
![Bookmarklet Example](https://dev-to-uploads.s3.amazonaws.com/i/f825jzi43l4vesb5tsqx.png)
3. Great! Now back to the [video](https://www.youtube.com/watch?v=dQw4w9WgXcQ) :wink:. This time click on your bookmarklet to pop the video out!


## So How Does it Work?

Essentially, we'll are executing the JavaScript directly in your browser to look for any `<video>` elements and then on the first `<video>` element, we're leveraging the [Picture-in-Picture](https://w3c.github.io/picture-in-picture/) API that allows websites to create a floating video window that stays on top of other windows and applications. Up until yesterday, I haven't heard of running JavaScript directly in the URL bar or the Picture-in-Picture API, so let's break it down together.


### 1. `javascript:`

As I mentioned, you can use the `javascript:` prefix in a URL to tell the browser to execute the following code as JavaScript instead of navigating to the web address.

Let's try it out. In the URL bar, type `javascript:console.log('hello world')` and then inspect the page to see it in your console log. Neat right? 

### 2. `document.getElementsByTagName('video')[0]`

Now that we're requesting to execute JavaScript, let's run the `getElementsByTagName('video')` method on the `document` to get an [HTMLCollection](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection) of the elements with a `<video>` tag. Since it will return an array-like object, we will use bracket notation `[0]` to target the first `<video>` returned by the DOM (Document Object Model) API.


### 3. `requestPictureInPicture()`

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.

### 4. Bookmarklets

Although we've ran everything so far in this example in the URL bar, as we've done earlier in the setup/usage, we can set the snippet as a bookmark to execute to execute JavaScript making it a bookmarklet.

And that's it! Anyways go forth and enjoy!


### References
* [Cred to Jeremy Ong (m_ninepoints)](https://twitter.com/m_ninepoints/status/1327859081680306177)
* [W3C Picture-in-Picture](https://www.w3.org/TR/picture-in-picture/)
* [MDN Picture-in-Picture](https://developer.mozilla.org/en-US/docs/Web/API/Picture-in-Picture_API)
* [Wikipedia Bookmarklet](https://en.wikipedia.org/wiki/Bookmarklet)
* [MDN Element.getElementsByTagName()](https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByTagName)