Remove The Scroll Bar When In Full Screen Mode

[KasimAhmic]

Whenever I'm watching a video and I go full screen, I always see the scroll bar to the right. I just added some code at the bottom of the jquery.jplayer.js file and at the top of the blue.monday.css file to fix that. I really think it should be added for the next update of jPlayer.

[KasimAhmic]

Any plans on implementing this?

[happyworm]

We left this to the dev by enabling the $.jPlayer.event.resize event and then use the event info to determine the full screen state. Then did something similar with the body like you did. I have done something similar in a project myself.

If it were implemented, the functionality would need to be integrated seamlessly into the cssSelector system. Plus an option added, as some people might not want the original page to always jump back to the top when leaving full screen. (Which is what I remember happening... Vaguely.)

We'll put it on the list to look at. Thank you for suggesting this, as it is important for us to know what people would like to be a feature, rather than leaving it as a "what is possible if you know how".

[KasimAhmic]

Sorry for taking so long to reply, but how exactly do you enable the $.jPlayer.event.resize event? And what do you mean by "integrating seamlessly with the cssSelctor system"? Also, I just took a look and when you exit full screen mode, the screen doesn't jump back to the top.

[KasimAhmic]

Is this what you meant by integrating the code? https://github.com/TheInfection/jPlayer/blob/master/jquery.jplayer/jquery.jplayer.js#L1903

[happyworm]

The $.jPlayer.event.resize occurs when the jPlayer display mode is changed to and from full screen mode. So you can bind a hander to it via the options like the ready event handler, or though using jQuery bind(). The event info helds a flag indicating the state... event.jPlayer.status.fullScreen I believe... My docs on the event object could do with updating by the look of it.

resize: function(event) {
if(event.jPlayer.status.fullScreen) {
$(body).addClass("no-scroll");
} else {
$(body).removeClass("no-scroll");
}
}

My comment about the "integrating with the cssSelector system" appears to be unwarranted. I think I was meaning that the class name added to the body should be configurable via an option in some manner... But there are a few other classes here and there like the progress bar activity animation class that is just hard coded too. So ignore me here.

The bit where you added the add/remove class code is in the shortcut method. The important bit is in the options code, since that shortcut calls the option method... So would change whatever the options bit calls or whatever.

I'm planning to add native full screen soon anyway... And the current feature is likely to become fullWindow and the native method replace fullScreen.

I have added this to my list and will close this for now. (i'm trying to clean up GitHub issues and PR.)

Thank you again for suggesting this.