Videojs - Theater Mode

This is right column. It's 30% of parent's width and disappeasr when browser's width is less than 650px.
It becomes 100% width under player when you enlarge player by clicking Theater mode button.

Theater mode button for Videojs

Nuevo plugin features Theater Mode button to show in controlbar optionally. Button action is synchronized with videojs mode event fired on button click. Mode event has 2 parameters: 'small' and 'large'.
Depending on parameter you can order to maximize 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 thetaer mode event fired.

On 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 comuns are resized to original size.

Our initial css is like:

#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 player on "mode" javascript example code)


<script>
var player = videojs('example_video_1');
player.nuevo({
	logo: '//domain.com/path/to/logo.png',
	logoposition: 'RT',
	logourl: '//domain.com',
	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 javascript code, use more css styling, change elements by class name, etc.