Enable/Disable fullscreen option video.js HTML5

Question

How can I enable/disable the fullscreen option of one video from my post tag HTML in Wordpress? I'm using Video.js.

I would not like to make it for ever, just decide which video I want with it or without it, anytime. I tried AllowFullScreen="true/false" but it doesn't work.

Solution 1

Current version of video-js (6.x.x) supports disabling of fullscreen button also by fullscreenToggle option. You can simply set it during init of the player like this:

videojs("my-video", {
    controlBar: {
      fullscreenToggle: false
    }
});

However, I observed that it doesn't mean that you are not able to enter fullscreen by hand gesture on mobile devices. (For example reverse pinch on iPad - two fingers on the screen and moving them apart). That's another story - I'm dealing with it by listening for fullscreenchange event and checking isFullscreen() state of the player (fullscreenchange event triggers on opening but on closing of the fullscreen as well), if it's in fullscreen then I'm calling exitFullscreen() function. Just like this:

videojs("my-video",{controlBar: {fullscreenToggle: false}}).ready(function(){
    let myPlayer = this;
    myPlayer.on("fullscreenchange", function(){
        if(myPlayer.isFullscreen()){
            myPlayer.exitFullscreen();
        }
    });
});

Solution 2

Looking through the video.js documentation, getting the child component named FullscreenToggle is a pretty involved process. For me, only myPlayer.children()[5].children()[7] did the trick, where myPlayer is defined here:

videojs("lodestar_video").ready(function(){
    myPlayer = this;
});

However, calling .disable() and .disposed() didn't work and returned undefined.

What worked for me was a CSS solution: making sure it doesn't appear using display:none and then setting the appropriate margin so the volume control doesn't go out of place.

.vjs-fullscreen-control { 
    display: none; 
} 

.vjs-default-skin .vjs-volume-control { 
    margin-right: 20px; 
}

The downside of this is the small overhead since the fullscreen button is still created and loaded, only not displayed, but this should be near-negligible in the light of loading an entire video.

Solution 3

Add class to video as below

.vjs-nofull .vjs-fullscreen-control {
    display:none;
}

to

<video class="video-js vjs-default-skin vjs-nofull" ....></video>

Hope it works

Solution 4

In 7.5.0 you can use this to hide the full-screen button and disable double-click

videojs("my-player", {
    controlBar: {
        fullscreenToggle: false
    },
    userActions: {
        doubleClick: false
    }
});

View more solutions