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
Displaying the Video Box
To add the video player shortcode:
| 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. |
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:
| Setting | Description |
|---|---|
| Widget Title | Sets the title of the video block |
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:
.custom_title h3 {
font-size: 20px !important; /* Change the title font size */
color: #9e1818; /* Change the title color */
}
