The theatre slider shortcode allows you to show a self-hosted or shared video as if it were inside a monitor or a laptop.

In this article, we will explain how to display and configure theatre slider shortcode.

To see the theatre slider shortcode in action, check out the demo page.

Theatre slider shortcode - demo


Displaying the Theatre Slider

To add the theatre slider shortcode:

1Add or edit an existing page.
2In the Visual Composer section, click on the + button.

Theatre slider shortcode - visual composer screen

3In the Add Element pop-up screen, search for Theatre Slider and click on it to be added to the page.

Theatre slider shortcode - add element

4When the shortcode is added, a new pop-up screen called Theatre Slider Settings will open that allows you to configure the shortcode settings.

Theatre slider shortcode - Theatre slider settings

5From the Video Host setting, select either the Self Hosted or Social Hosted option.

Theatre slider shortcode - video host

6For the Self Hosted option, configure the settings as required.
SettingsDescription
MP4 FormatUploads the video file in MP4 format for IE 9 compatibility.
WebM FormatUploads the video file in WebM format for Firefox 4, Opera, and Chrome compatibility.
OGV FormatUploads the video file in OGV format for older Firefox and Opera compatibility.
7For the Social Hosted option, configure the settings as required.
SettingsDescription
YoutubeSet the Youtube video ID. For example, in the following Youtube link https://www.youtube.com/watch?v=6oZ8xV86JxY, the video ID is 6oZ8xV86JxY
VimeoSets the Vimeo video ID. For example, the following Vimeo link https://vimeo.com/127203262, the video ID is 127203262.
8Click on Save Changes and publish or update the page to check the result.

Configuring the Settings

There are a few more settings in the Theatre Slider Settings pop-up that allow you to customize the slider. Configure the settings as required.

SettingsDescription
Background StyleSets the slider inside a monitor or laptop.
Slider Max WidthSets the maximum width possible for the slider.
Show Social Video ControlsDetermines whether or not to show the video controls.
Slider AlignSets the alignment of the slider. There are three options available: Left, Center, and Right
Margin BottomAdds spacing to the bottom of the slider as a margin.

Adding an Extra Class Name

The Extra Class Name field in the settings pop-up allows you to add an extra class name to the shortcode. It’s useful when you need to target the shortcode in a stylesheet or JavaScript file.

You can read the Adding a custom CSS class to a shortcode article for further explanation.