Theater Mode Guide

Enable Player Theater Mode Guide

Enable Player Theater Mode Guide

The player has a handy feature with which you can easily enable "theater mode" which will expand the player and show a better viewer experience.

In order for the player to have "theater" functionality you should:

  1. Create player with "width" and "height" parameters set to your desired aspect ratio (16:9, 4:3, 1:1,2.35:1) or set width to 100%. This will enable the player to expand/shrink itself.
    Here's an example embed code of a player with theater mode enabled and proper sizes set:
$bp("myDiv", {
	"id":"{PLAYER_ID}",
	"width":"16",
	"height":"9",
	"video":"{VIDEO_ID}",
	"theaterMode": true
});

🚧

Note

Substitute your player and video ID in the above code.

  1. Put the player in the custom "div" element which will change its size when player enters/exits theater mode.
    Theater mode works by adding an empty CSS class "brid-theater-mode" to the HTML element of your page. It is up to you to define how the website responds to it. You should be able to define behavior of every single element of your website when entering the theatre mode by simply defining a new CSS class for that element:
body.brid-theater-mode .random_element_class { .... }

And it will take effect when the "theater mode" button is pressed.

You can find a fully working example on the following link.