Set a Video Background

This article will guide you through the steps to set a video background on your page, helping you create a visually stunning and engaging user experience.

About a Video Background

Video backgrounds are a popular choice for hero banners, providing a modern and engaging alternative to static background images. When used effectively, they can tell your brand’s story, evoke emotions, and create an immersive experience that draws viewers in and keeps them on your page longer.

Set a Video Background Using the Hero Banner Element

To add a video background, you’ll use the Hero Banner element. If you’re unfamiliar with this feature, check out our Hero Banner element guide for a detailed overview. Follow the steps below to set up your video background.

Step 1: Upload the Video or Get the Video Source URL

There are two main ways to add a video background:

Option 1: Upload to Shopify Admin

Log in to your Shopify Admin.
Navigate to Content > Files.
Click Upload Files and choose the video you want to use as the background.

add-video-shopify

Copy the file URL for use in the Hero Banner settings.

Option 2: Use an External Video Source

Select a video from other platforms like YouTube.
Copy the URL or embed the link of the video.

These are some good sources for videos:

YouTube: Wide range of free and paid videos.
Vimeo: High-quality and professional video options.
Wistia: Ideal for businesses with marketing-focused video needs.

Step 2: Drag and Drop the Hero Banner Element

In your page editor, locate the Hero Banner element.
Drag and drop the element onto the desired section of your page.

Step 3: Configure the Settings

Select the Hero Banner element to open its settings in the left sidebar.

open-settings-video

In the Background Settings, under Banner Source choose Video as the background type.

choose-video-background

Choose the video source and paste the URL (from Shopify or an external platform) into the designated field.

Customize the settings:

Size: Adjust the size of the video to fit the desired section or area.
Shape: Modify the shape of the video background by applying rounded corners, borders, or other styling effects to align with your design.
Overlay: Add a color overlay with adjustable transparency to enhance text readability or match your branding theme.
Zoom when Hover: Enable a zoom effect to create an interactive and engaging experience when users hover over the video.

Notes: Be mindful of your page load speed. Large video files can slow down your site, potentially impacting user experience and conversion rates. Test performance and monitor user engagement to determine if a video background positively influences conversions.