What is the background video section? #
The Background video section displays prominent text with a video playing in the background. It plays without audio on an automatic loop and enables promotional messages to be shared, whilst adding energy and movement to the page.
A good Background video can improve the overall customer experience by showcasing your products or services in action. Videos also tend to be more engaging than static images, which could encourage visitors to stay on your site longer and potentially increase conversions.
How to create a background video section #
Steps
- Open the Theme Editor.
- On the left hand side, click Add section and add a Background video section.
- There are two different methods to choose a video.
- Video upload: Select a video file (e.g. an MP4) hosted on your Shopify store.
- External video: This is a video from an external link and supports YouTube or Vimeo videos.
Once the video source has been selected, a Video description can be added. This is hidden text that will be read out by screen readers and should describe the content of the video.
It is also recommended to add a Cover image that will display in the place of the video while the video is loading, or if it cannot autoplay. This could be due to reasons such as a user’s poor internet connection, limited browser support or slow page load times.
How to improve speed scores #
Videos by their nature are large and take time to load. If you’re trying to keep Enterprise performing well, avoid placing the Background video section near the top of the page. The browser will need to wait until the video can start playing and this will contribute to a higher Largest Contentful Paint (LCP) score.
The Image banner section is probably the fastest visual section that can be placed at the top of the site. If you do this, ensure you tick the Load the section without animation setting. Unticking this setting will also mean that the image within the Image banner section is not lazy loaded – meaning ‘above the fold’ content will load as quickly as possible.
Also avoid embedding images or video within the Shopify rich text area in such areas as product pages, collection pages, general pages, and blog articles. Instead, use the image and video sections within the theme.
TipFor best video loading times, use short MP4s and be mindful of the file size. Keep MP4s under 2-3mb where feasible.
Lazy loading #
Enterprise version 1.1.0 brings lazy loading capability to videos as standard – meaning videos will only load as they’re about to become visible on the page (i.e. scrolled to). The Background video section comes a Lazy load the video setting to selectively enable this. You may want to untick this setting for the following reasons:
- The video is at the top of the page – in which case you’ll want the video to load as quickly as possible (and not be lazy loaded).
- You want to give the background videos the best possible chance of auto-playing on older devices.
