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;}
<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>