Theater mode switcher

Video Player is loading.
Advertisement
Current Time 0:00
Duration -:-
Loaded: 0%
Stream Type LIVE
Remaining Time -:-
1x
  • Chapters
  • descriptions off, selected
  • captions off, selected
    Theater mode
    x
    ZOOM HELP
    Drag zoomed area using your mouse.
    100%

    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.