# Make Your Video Player Float Using PiP API

In this article, I am going to make your video player float by using Picture-in-Picture (PiP) JavaScript Web API. This could be an important feature you can add to your website. If your website is showing a demo or has many videos.

Most of you might have heard of this [Picture-in-Picture Extension](https://chrome.google.com/webstore/detail/picture-in-picture-extens/hkgfoiooedgoejojocmhlaklaeopbecg?hl=en). It allows you to watch videos in a floating window (always on top of other windows). It works mostly on every site.

But we will create our custom Button that makes this feature available for our website by default. So our users won't need this extension. Let's dive into it.

## What is Picture-in-Picture API?

The **Picture-in-Picture API allows** websites to create a floating video window always on top of other windows so that users may continue consuming media while they interact with other content sites or applications on their devices. Simple, Right?

## Let's look at the demo

The following gif shows the demo of how that works:

![](https://i.imgur.com/7HB3aTR.gif align="center")

## Let's build it

First, we need a structure means HTML so for that I have simply used two things `video` and `button`.

```xml
<div class="video-container">
   <video id="videoElement" controls loop src="https://imgur.com/yIVEIR9.mp4"></video>
   <button id="toggleButton">Enable Floating Video</button>
</div>
```

CSS for this can be found at the end of the article in the Codepen. Now the main thing is **JavaScript.** Let's add that.

First getting the `video` and `button`:

```javascript
const video = document.getElementById("videoElement");
const toggleBtn = document.getElementById("toggleButton");
```

After that, we need to verify if your browser supports that or not. You can do like the following:

```javascript
// 👇Checking that if it is working or not
if ("pictureInPictureEnabled" in document) {
    /// .... other code
}
```

Now we need to add an event listener on the `toggleBtn` and when it is clicked then we will run a function called `togglePiPMode`

```javascript
 // 👇Checking that if it is working or not
if ("pictureInPictureEnabled" in document) {
  // 👇 Running 'togglePiPMode' function when user click the button
  toggleBtn.addEventListener("click", togglePiPMode);
}
```

Now it's time to create `togglePiPMode` function. First, I check if the user is already in PiP mode or not. If he is not the only then request for Picture-in-Picture mode. otherwise simply just exit from PiP. I have wrapped the code in `try...catch` block to make sure if something goes wrong then it will `console` the error.

```javascript
function togglePiPMode() {
  try {
    // 👇 Checking that if user should not be in PiP mode
    if (video !== document.pictureInPictureElement) {
      video.requestPictureInPicture();
    } else {
      document.exitPictureInPicture(); // 👈 If already in PIP Mode then exit
    }
  } catch (error) {
    console.log(error); // Console any error if any
  }
}
```

Now Picture-in-Picture mode will work flawlessly.

### Full JavaScript Code

```javascript
const video = document.getElementById("videoElement");
const toggleBtn = document.getElementById("toggleButton");

// 👇Checking that if it is working or not
if ("pictureInPictureEnabled" in document) {
  // 👇 Running 'togglePiPMode' function when user click the button
  toggleBtn.addEventListener("click", togglePiPMode);

  // 👇 event trigger when you enter in PiP mode
  video.addEventListener("enterpictureinpicture", () => {
    toggleBtn.textContent = "Exit PiP Mode";
  });

  // 👇 event trigger when you leave the PiP mode
  video.addEventListener("leavepictureinpicture", () => {
    toggleBtn.textContent = "Enter PiP Mode";
  });
}

function togglePiPMode() {
  try {
    // 👇 Checking that if user should not be in PiP mode
    if (video !== document.pictureInPictureElement) {
      video.requestPictureInPicture();
    } else {
      document.exitPictureInPicture(); // 👈 If already in PIP Mode then exit
    }
  } catch (error) {
    console.log(error); // Console any error if any
  }
}
```

## Let's understand events in PiP

*The Picture-in-Picture API defines three events, which can be used to detect when picture-in-picture mode is toggled and when the floating video window is resized.*

*   `enterpictureinpicture`: Sent to a `HTMLVideoElement` when it enters picture-in-picture mode.
    
*   `leavepictureinpicture` : Sent to a `HTMLVideoElement` when it leaves picture-in-picture mode.
    
*   `resize` : Sent to a `PictureInPictureWindow` when it changes size.
    

Let's use `enterpictureinpicture` & `leavepictureinpicture` in our little project. I'll be changing the Button Text as these events are fired. Let's take a look at the code:

```javascript
 // 👇 event trigger when you enter in PiP mode
  video.addEventListener("enterpictureinpicture", () => {
    toggleBtn.textContent = "Exit PiP Mode";
  });

  // 👇 event trigger when you leave the PiP mode
  video.addEventListener("leavepictureinpicture", () => {
    toggleBtn.textContent = "Enter PiP Mode";
  });
```

Now, Let's take a look at the `resize` event. When we run `requestPictureInPicture` then it returns a promise and we add `resize` event on `pictureInPictureWindow` when it fires then we call a function `windowDimensions`.

```javascript
// 👇 This will print the dimensions of the window
function windowDimensions(evt) {
  const pipWindow = evt.target;
  console.log(`Floating window Dimensions : ${pipWindow.width}x${pipWindow.height}px`);
}

// 👇 resize event on pip window
video.requestPictureInPicture().then((pictureInPictureWindow) => {
  pictureInPictureWindow.onresize = windowDimensions;
});
```

From `PictureInPictureWindow` interface we can get the `width` and `height` and `resize event` of the floating video window.

## Codepen

%[https://codepen.io/j471n/pen/qBKzbbo] 

### Conclusion

In this article, I have explained how you can make a floating video player by using Picture-in-Picture (PiP) JavaScript Web API. Now, you can try to add this functionality to your website.

If you enjoyed this article, then don't forget to give ❤️ and Bookmark 🏷️for later use and if you have any questions or feedback then don't hesitate to drop them in the comments below. I'll see in the next one.

**Connect with me**

| Twitter | GitHub | LinkedIn | Instagram | Website | Newsletter | Support |
| --- | --- | --- | --- | --- | --- | --- |
|  |  |  |  |  |  |  |