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.
Displaying the Theatre Slider
To add the theatre slider shortcode:
Settings | Description |
---|---|
MP4 Format | Uploads the video file in MP4 format for IE 9 compatibility. |
WebM Format | Uploads the video file in WebM format for Firefox 4, Opera, and Chrome compatibility. |
OGV Format | Uploads the video file in OGV format for older Firefox and Opera compatibility. |
Settings | Description |
---|---|
Youtube | Set the Youtube video ID. For example, in the following Youtube link https://www.youtube.com/watch?v=6oZ8xV86JxY, the video ID is 6oZ8xV86JxY |
Vimeo | Sets the Vimeo video ID. For example, the following Vimeo link https://vimeo.com/127203262, the video ID is 127203262. |
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.
Settings | Description |
---|---|
Background Style | Sets the slider inside a monitor or laptop. |
Slider Max Width | Sets the maximum width possible for the slider. |
Show Social Video Controls | Determines whether or not to show the video controls. |
Slider Align | Sets the alignment of the slider. There are three options available: Left, Center, and Right |
Margin Bottom | Adds 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.