Videojs - Theater Mode

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% width under the player when you enlarge player by clicking Theater mode button.
HTML element's width style changes on mode player's event fired when you click thetre button. Mode event values are "large" or "normal".

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

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

Our initial css is like:

Code snippet

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

To set player 100% wide, just set both containers width 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.