# How to enable picture in picture in custom ui?

**URL:** <https://community.bitmovin.com/t/how-to-enable-picture-in-picture-in-custom-ui/3041>\
**Category:** Support\
**Tags:** bitmovin-player, ui, bitmovin, web, react\
**Created:** [June 26, 2024, 6:42pm UTC](https://community.bitmovin.com/t/how-to-enable-picture-in-picture-in-custom-ui/3041 "2024-06-26T18:42:15Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![carlos.salmanca](https://avatars.discourse-cdn.com/v4/letter/c/dc4da7/32.png) [@carlos.salmanca](https://community.bitmovin.com/u/carlos.salmanca)\
**Post date:** [June 26, 2024, 6:42pm UTC](https://community.bitmovin.com/t/how-to-enable-picture-in-picture-in-custom-ui/3041/1 "2024-06-26T18:42:16Z")

</div>

### Product

Player

### Question

I’m creating a custom ui for my bitmovin player and I need to add the picture in picture button, I tried this:

```auto
new ControlBar({
 components: [
/*Other components*/
new Container({
 components: [
/*Other components*/
    new PictureInPictureToggleButton()
      ]
    })
   ]
})

```

But the button is never shown.

---

<div class="post-metadata">

**Author:** ![Kishore](https://sea1.discourse-cdn.com/flex015/user_avatar/community.bitmovin.com/kishore/32/174_2.png) [@Kishore](https://community.bitmovin.com/u/Kishore)\
**Post date:** [June 27, 2024, 6:43am UTC](https://community.bitmovin.com/t/how-to-enable-picture-in-picture-in-custom-ui/3041/2 "2024-06-27T06:43:44Z")

</div>

@carlos.salmanca `The PictureInPictureToggleButton` component checks the player viewMode to determine PIP support, which currently returns `not available`, causing the button to be hidden. You can enable/disable PIP using the native browser APIs. Here is a sample implementation.

```auto
let pipButton = new bitmovin.playerui.ToggleButton({ cssClass: 'ui-piptogglebutton' });
  pipButton.onClick.subscribe(async function () {
      try {
          if (videoElement !== document.pictureInPictureElement) {
              await videoElement.requestPictureInPicture();
          } else {
              await document.exitPictureInPicture();
          }
      }
      catch (error) {
          console.log('' + error);
      }
 });

let controlBar = new ControlBar({
 components: [
/*Other components*/
new Container({
 components: [
/*Other components*/
    pipButton,
      ]
    })
   ]
})

```

You can find the working sample here - [bitmovin-player-web-samples/webapi-pip/index.html at main · bitmovin/bitmovin-player-web-samples · GitHub](https://github.com/bitmovin/bitmovin-player-web-samples/blob/main/webapi-pip/index.html)

---

<div class="post-metadata">

**Author:** ![daniel](https://sea1.discourse-cdn.com/flex015/user_avatar/community.bitmovin.com/daniel/32/121_2.png) [@daniel](https://community.bitmovin.com/u/daniel)\
**Post date:** [July 1, 2024, 7:29am UTC](https://community.bitmovin.com/t/how-to-enable-picture-in-picture-in-custom-ui/3041/3 "2024-07-01T07:29:26Z")

</div>

@carlos.salmanca @Kishore since player version 8.166.0, Picture-in-picture is fully supported on major browsers: [Release Notes Web: 8.166.0](https://developer.bitmovin.com/playback/docs/release-notes-web#81660)

If your browser supports PIP APIs (like Chrome or Safari), the button will just show up in your original example @carlos.salmanca (using player 8.166.0 or newer). This is the recommended approach.

Please note that Firefox is the odd one out, they chose to not implement the official API: [HTMLVideoElement API: requestPictureInPicture | Can I use... Support tables for HTML5, CSS3, etc](https://caniuse.com/mdn-api_htmlvideoelement_requestpictureinpicture)  
Instead, Firefox might render its own PIP-button, unfortunately.