Theater mode switcher
Player Initialization Code Example
<script>
var player = videojs('player_1');
player.nuevo({
theaterButton: true
});
player.on('mode', function( event, mode ) {
var width;
if(mode=='large') width = "100%"; else width = '70%';
document.querySelector("#theater").style.width = width;
});
</script>
By enabling
theaterButton option (true) you gain access to new "theater" button in controlbar, just like on youtube player.
The player triggers "mode" event when button clicked. This allows to control player's parent HTML element depending on your website/blog layout.
Triggered
mode has 2 possible values: "large" and "normal".
Yo must have some css and html experieence to setup HTML element to resize according to
mode state.
Feel free to review example html and css.