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