# Theater mode switcher

## Player Initialization Code Example

    <!--Initialize player and plugin-->
    <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.