Videojs - Theater Mode

The Nuevo plugin features a Theater Mode button to show optionally in the control bar. The button action is synchronized with the videojs mode event that occurs when the button is clicked. The Mode event has two parameters: small and large. Depending on the parameter, you can order to maximize the videojs parent element to the desired size and back. Of course, this requires a little knowledge of CSS and Javascript. Check player code setup, how to enable the Mode button, and an example of CSS and Javascript code used on this page when the theater mode event is fired.

In the example above, the player's container is centered, 70% of the parent's width.Upon clicking the theater button, the player triggers a mode event with a "large" value. This indicates to expand the player's container to 100% of its parent's width. When the theater button is clicked again, it triggers an event with the "normal" value, and the player's container width is back to its original size (70%).