Feature a video on your homepage accompanied by text and a call-to-action. Feature text separately, as an overlay, or both with the Video section.
Add a video section to your home page
Navigate to the Sections tab in the theme editor and select Add section > Video
Select a section style
Start by choosing the Style option for the section to use from the dropdown menu. There are three options: Accent, Contrast, and Default. You can change the colors associated with each in under Theme settings > Colors in the theme editor.
Add section heading and text
Add a heading to introduce the section with the Heading field, then some text using the Text field.
Connect the video
Next, copy the Video URL from YouTube or Vimeo and paste it into the theme editor.
Select an aspect ratio
Choose either 16:9 or 21:9 from the Aspect ratio dropdown. This setting controls the videos's proportions for the height and width.
Adjust the layout
Select one of two layout options: Full width or Content width. Full width will expand to fill the horizontal space, while Content width will keep the video more contained.
Select the Autoplay option to encourage the video to play automatically when the customer scrolls over the section. This feature may be limited by browser or device settings of the customer.
Activate the overlay
Enable Show overlay to activate the overlay, then add the desired overlay Heading and Text.
Position and colors
Use the Heading and text position dropdown to have the text components of the overlay appear above or below the play button.
Use the color swatch selectors to assign a Text color for the text and a Background color for the overlay. Then adjust the Background color opacity using the provided slider.
Add an image cover
Upload an image by clicking Select image. This image serves as a cover for the video, displaying up until the video is played. Images used here should be at least 1400px in width.
Configure the image's focal point by selecting an option from the Image position dropdown. This setting will not have much of an impact if your background image's dimensions are roughly the same size as the section.
Try out button styles
There are two styles of play buttons to use in this section. To adjust this, select an option from the Button style dropdown.