CODEWITHSUNDEEP
video.jspicture-in-picture
Peter Karlsson
Peter Karlsson

Reputation: 423

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

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?

Upvotes: 3

Views: 8041

Answers (4)

nverba
nverba

Reputation: 4083

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

After player initialised:

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

Upvotes: 1

CamHart
CamHart

Reputation: 4335

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

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

      })

Upvotes: 4

misterben
misterben

Reputation: 7821

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

Upvotes: 9

David
David

Reputation: 2346

Add this css:

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

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

Upvotes: 1

Related Questions