Step-by-Step Guideline: 👇
Step 1: Go to the Widgets section ➔ Click New widget ➔ All widgets ➔ Choose Ambient video
Step 2: Name your widget and start using it.
Step 3. Select a video to serve as the background for desktop and mobile view.
Step 4: Widget design - select the format of the video: Fit to screen or Fill container.
Fit to screen = The video will be resized to fit the dimensions of the screen or container in which it is displayed while maintaining the aspect ratio of the original video. This means that the entire video will be visible, but some parts of the video may be cut off if the aspect ratio of the screen or container is different from that of the video.
Fill container = The video will be expanded to fill the entire screen, regardless of the original aspect ratio. This means that the entire video will be visible, but some parts of the video may be stretched or distorted to fit the screen. You will need to define a container height in your Shopify theme code.
Step 5: Upload the Fallback image from your computer. This image will be used as a placeholder while your video is still loading.
The placeholder image for a background video should ideally be a high-quality, static image.
The image should have a similar composition or subject matter to the video that will replace it.
The image should have a resolution that is appropriate for the display size.
The aspect ratio of the image should match the aspect ratio of the video that will eventually replace it.
It's recommended to use an image format that is widely supported by most browsers, such as JPEG, PNG, or GIF.
The image file size should be optimized for faster page loading times.
Step 6: Enable play/pause controls on your background video
You're also able to select between desktop and mobile and implement different settings based on the device the majority of your website traffic comes from.
Step 7: Install the background video on your Shopify pages by following these installation steps:
Didn't find what you were looking for?
Check out the rest of our articles, or reach out to our support team by chat or email.