Video Player Shortcode

Last Updated on

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

In this article


Displaying the Video Box

To add the video player shortcode:

1
Add or edit an existing page.

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

Video player shortcode - visual composer screen

3
In 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

4
When 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

5
Configure 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.
6
Click 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:

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

Video player shortcode - configure styling

2
Configure the style settings as required.
SettingDescription
Widget Title Sets the title of the video block
3
Click 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:

x
Note: We assume that you are familiar with inspecting elements. If you need more help please follow this article: Inspecting Elements
1
Drop in a video player shortcode and add an extra class name like “custom_title”
2
Add 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 */ 
}

3
Hit Save Changes and refresh your page.
Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket