Video Banner Element

About Video Banner Element in GemPages

The GemPages’ Video Banner element allows you to add dynamic video backgrounds to your page, perfect for hero sections or promotional blocks. 

Instead of relying on static images, you can use motion to tell your brand story, highlight key messages, and immediately grab visitors’ attention.

This element makes it easy for any Shopify merchant to build immersive, modern layouts that improve both visual appeal and user engagement.

How to Add a Video Banner Element to Your Page?

Follow these simple steps to add the Video Banner Element to your page:

Step 1: From your Shopify admin, go to the GemPages dashboard and locate Pages.

Step 2: Click on the page where you’d like to display the video banner to open GemPages Editor. 

If you haven’t created a page yet, hit Create new page, and refer to this guide to get started.

Step 3: Use the search bar in the GemPages editor to find the Video Banner Element. Drag and drop it onto the desired position on your page.

Then, click on the element to open its settings. You can customize it your way using the Settings and Advanced tabs.

Configure the Settings tab

Locate the Settings tab to configure the video banner element:

Layout

Choose the layout of your video element from 12 available options in the settings panel. Also, you can adjust the ratio for the best visibility.

Background

In the Background section, configure the background of this element. 

If you prefer the Video background option, ignore the Color and Image ones.

Note: Although the Color and Image background options are still available, the changes might be hidden by the video.

In the Video settings panel, select the video source from YouTube or Video hosting. Then, enter the video URL in the box to use it as the element background.

Set the Loop video to Yes if you want the video to loop. 

Also, you can add an overlay to your video. Click Show more > “Add…” box next to the Overlay option to configure the overlay layer as you prefer.

Size

Choose your preferred ratio from the Video ratio dropdown. By default, the ratio is set to 16:9, ideal for most desktop screens.

You can also select Custom to define your own ratio.

Then configure:

• Width:
  • Full (100%): Displays the video at full width.
  • Default (1200px): Limits video to your page’s content width.
• Height: Customize for visual balance on desktop and mobile.

Content

Adjust the content width, padding, and alignment of your video banner:

• Width: Control the width of any content placed over the banner.
• Padding: Adjust the spacing within the banner for a clean layout.
• Align: Choose how the overlay content is vertically aligned within the banner (top, middle, bottom, and full height)

Shape

Customize the banner’s shape to match your design style:

• Border: Add a border for emphasis.
• Corner Radius: Round the corners for a softer look.
• Shadow: Add a shadow to create depth.

Effect

Apply an overlay to enhance visibility for your video banner.

Link

Toggle on the Link section to see the detailed settings. You can choose the After click action from the dropdown list, including:

• Open page
• Scroll to
• Open popup
• Send email
• Make phone call

For example, we set the After click = Open page. Then, select the target page by inserting the page link or choosing from the available options:

SEO

Optimize the video banner for search engines by providing alt text and image title, ensuring better visibility for your store.

Align

Adjust the video alignment: left-aligned, center-aligned, or right-aligned as you prefer.

Configure the Advanced tab

For more advanced customization, please navigate to the Advanced tab and follow the instructions in this article.