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?
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.
You can also pass it in as options to the videojs constructor.
const player = videojs(videoElement, {
controls: true,
controlBar: {
pictureInPictureToggle: false
}
}, function() {
})
Add this css:
.video-js .vjs-picture-in-picture-control { display: none; }There's a full example here: https://weasel.firmfriends.us/Private3-BB/