Video Player Shortcode

Updated on July 2, 2018

The video player shortcode allows you to display a video on your page with very easy steps.

In this article, we will explain how to display the video box and configure the style.

To see the video player shortcode in action, check out the demo page

Video player shortcode - demo


Displaying the Video Box

To add the video player shortcode:

1Add or edit an existing page.

2In the Visual Composer section, click on the + button.

Video player shortcode - visual composer screen

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

Video player shortcode - add element

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

Video player shortcode - Video player settings

5Configure the settings as required. More settings are explained in the next sections.
Setting Description
Video Type Choose between adding your video by social or self hosted method.
Video Link The link of the video you want to embed, For YouTube HD videos, add this snippet to the end of the link “&vq=1080” (video quality set to 1080p). More about supported formats at WordPress codex page
Autoplay and Loop If enabled, the video will autoplay and the loop option will be available.
Hide Controls To hide the video control buttons and progress bar, enable this option. This option will work only with self hosted videos.
Custom Thumbnail and Lightbox Lets you use your own image and playback icon for the video thumbnail and play videos inside a lightbox.
6Click on the Save Changes button and publish or update the page to check the result.

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 style sheet or JavaScript file.

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

Adding an Entrance Animation

The Viewport Animation field in the settings pop-up allows you to hide the shortcode initially and make it visible with animation when you scroll through the browser.

You can read the Configuring a shortcode’s entrance animation article for further explanation.


Configuring the Styling

There is only one setting in the video settings pop-up that allows you to configure the style of the video.

To configure the styling:

1In the Visual Composer screen, click on the Pen button to open the video player settings pop-up.

Video player shortcode - configure styling

2Configure the style settings as required.
SettingDescription

Widget Title Sets the title of the video block
3Click on the Save Changes button and update the page to check the result.

Changing the Video Style

To add more stylings to the video, you’ll need to add a custom CSS class and write the CSS rules.

In this example, we will change the video title by increasing the size, applying the fancy style, and changing the color to blue, as seen below:

1Drop in a video player shortcode and add an extra class name like “custom_title”
2Add this CSS snippet to Jupiter > Theme Options > Advanced > Custom CSS:

.custom_title h3 {
font-size: 20px !important; /* Change the title font size */ 
 color: #9e1818; /* Change the title color */ 
}

3Hit Save Changes and refresh your page.
Did this answer your question?