How do I remove picture in picture icon in video.js?

Question

I am using Video.js plugin to show videos on my website.

I want to remove the picture in picture icon. I have tried for several hours but no success.

<video controls preload="auto" poster="path to poster" data-setup='{controllBar: {pictureInPictureToggle: false}}'>
    <source src="path to video" type="video/mp4" />
</video>

What am I doing wrong?

Answer 1

It should be data-setup='{"controlBar": {"pictureInPictureToggle": false}}', with quotes (it's a JSON string) and one l in 'controlBar'.

Note this will remove Video.js's control bar button but not Firefox's Picture-in-Picture floating button. Whether Firefox displays that is only configurable by the end-user.

Read About Picture-in-Picture in Firefox

Answer 2

Add this css:

.video-js .vjs-picture-in-picture-control { display: none; }

There's a full example here: https://weasel.firmfriends.us/Private3-BB/

Answer 3

You can also pass it in as options to the videojs constructor.

      const player = videojs(videoElement, {
        controls: true,
        controlBar: {
          pictureInPictureToggle: false
        }
      }, function() {

      })

Answer 4

To remove the toggle completely, and not just disable it.

After player initialised:

player.controlBar.removeChild(player.controlBar.getChild('PictureInPictureToggle'));