Video Banner Element

What is the Video Banner Element?

The Video Banner Element of GemPages is designed to help you create video backgrounds for your hero banners. 

By dragging and dropping this element into your design, you can build engaging sections that draw in visitors and enhance the overall appeal of your store.

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: Navigate to the page where you’d like to display the video banner. If you haven’t created a page yet, refer to this guide to get started.

Step 2: 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.

Video Banner Element Settings

1. Banner Source > Video

Choose the video source for your banner:

• YouTube: Supports both YouTube Shorts and long videos. Simply paste the video link into the weblink box.
• Video Hosting: Upload your video to Shopify and paste the video link into the weblink box. Preview the result on your live page to ensure it appears correctly.

Options:

• Weblink: Enter the video link here. For example: 

YouTube: https://www.youtube.com/watch?v=VIDEO_ID 

Direct MP4 File: https://example.com/path-to-video/video.mp4 

• Loop Video: Enable looping to ensure the video plays continuously.

1. Verify the Video URL: Make sure the URL you’re using is correct, points directly to the video file, and is accessible.
2. External Source Issues: If you’re embedding a video from an external platform (like YouTube or Vimeo), ensure the video is still available and hasn’t been deleted or modified.

2. Link

Set a redirect link for when users click on the banner. This is ideal for driving traffic to specific pages or promotions.

3. Size

Fine-tune the video and banner dimensions:

• Video Ratio: Adjust the aspect ratio of the video.
• Banner Ratio: Modify the overall banner’s aspect ratio.
• Banner Width and Height: Define the size of the banner.
• Content Width: Control the width of any content placed over the banner.
• Content Padding: Adjust the spacing within the banner for a clean layout.

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

5. Overlay

Apply an overlay to enhance visibility and contrast between the video and the content.

6. Zoom When Hover

Enable zoom effects to add interactivity when users hover over the banner.

7. SEO

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