Videojs - Theater Mode

STANDARD

PREMIUM

GOLD

This is the right column. It's 30% of the parent's width and disappears when a browser's width is less than 650px.
It becomes 100% wide under the player when you enlarge the player by clicking the Theater mode button.
The HTML element's width style changes on mode player's event is fired when you click the theater button. Mode event values are "large" or "normal".

The Nuevo plugin features a Theater Mode button to show optionally in the control bar. The button action is synchronized with the videojs mode event that occurs when the button is clicked. The Mode event has two parameters:small and large.Depending on the parameter, you can order to maximize the videojs parent element to the desired size and back. Of course, this requires a little knowledge of CSS and Javascript. Check player code setup, how to enable the Mode button, and example of CSS and Javascript code used on this page when theater mode event is fired.

On this page, we use a container divided into 2 columns: 70% and 30% of full width. When the theater button is clicked for the first time, it fires a "large" value. This is a signal to enlarge both columns to 100% width. When the theater button is clicked again, it fires the "normal" value, and columns are resized back to their original size. The initial CSS is like this:

Code snippet

#left_column {
width:70%;
float:left;
}
#right_column {
width:30%;
float:left;
}

To set the player's width to 100%, just set both container widths to 100% (see the player on "mode" javascript example code).

Code snippet

<script>
var player = videojs('example_video_1');
player.nuevo({
theaterButton: true
});
player.on('mode',function(event,mode) {
if(mode=='large') {
document.querySelector("#left_column").style.width='100%';
document.querySelector("#right_column").style.width='100%';
} elseif(mode=='normal') {
document.querySelector("#left_column").style.width='70%';
document.querySelector("#right_column").style.width='30%';
}
});
</script>

Of course, you may design your elements differently, extend and optimize the javascript code, use more CSS styling, target elements by class name, etc.