How to use the Video Background element

In this article, we will learn about Video Background elements and how to use them to create highly converting pages.


About the Video Background Element

Using Videos as a background is one of the most intriguing mediums of communicative marketing tools today. They are the best story-telling devices and have been used by almost all businesses to inform, engage, and persuade their potential customers. 


From the GemPages Dashboard, open a page you would like to edit. You can quickly locate this element on the left sidebar under the Video category. Next, drag & drop the element to the position you prefer.

Before that, you will need to upload your video to Youtube, Vimeo, or Shopify server



GemPages provides an efficient tool for managing and designing your Video Background, including Settings and Design tabs. In this article, we'll walk you through each feature so you can make your own stunning Video background.

Due to the limitations of the mobile web browser, the Video Background might not be auto-played on mobile. See this article for more information.


Settings Tab

1. Video URL

You can insert the video link from Youtube, Vimeo, or Shopify server under the Custom option.



Note: For YouTube Shorts, you can place them into the Video Background element and play them as a normal video background. Just right-click on the short > Copy video URL to get the short's URL and then paste it into the corresponding YouTube Weblink field in the Video Background element's left sidebar settings in the Editor.


2. Background Image

It allows you to select an image that appears before the video runs. You can upload the image from your device or use a link.



3. Overlay

This feature enables you to cover the background with a color and adjust the level of transparency with the Opacity setting.


4. Content position

The feature allows you to determine where to represent the content in the video background. 


5. Height

You can determine the video’s height with this feature (in pixels). In case you prefer the original size, kindly set it as “auto.”



6. Sound

Toggle the switch to turn on or off the sound of the video. 



Note that the autoplay feature will not work correctly when the sound is on, according to Google's autoplay policy

7. Extra Class

If you wish to customize the variant's content element particularly, please use this field to add a class name and then refer to it in the CSS file.



Design Tab

To style how the element looks, please navigate to the Design Tab and follow the instructions in this article.


That’s it! The Video Background is ready to capture your visitors’ attention. Kindly click here to know more about the other elements or get in touch with our customer support team via email or live chat.


Was this helpful?