Flex includes a Video section to enhance your pages. This section is ideal for storytelling, social proof, and demonstrating the value of your product and brand.
The Video section supports Youtube, Vimeo, or HTML5 videos, can be fullscreen or standard width, include a placeholder image, text areas, and buttons. Although there is limited browser support for autoplaying videos, the Video section includes an option to enable autoplay if possible.
Add this section to the
Video Section Settings
Click the Video section to open its settings.
Aspect ratio
An aspect ratio is the ratio of its width to its height. In the video section, select one of two options for the Aspect ratio setting: 16:9 and 4:3.
Autoplay
Enable the Autoplay setting for videos to play automatically. Most major browsers have added some limitations on videos to prevent them from auto-playing. Although autoplay can no longer be guaranteed, we have an article that provides some tips to help increase the likelihood for your videos.
Autoloop
Enable the Autoloop setting to have the video restart automatically after it finishes.
Video link
Add your video link to the provided field. This section will accept both Vimeo and YouTube links.
HTML5 MP4 file URL/HTML5 OGV file URL (optional)
The HTML5 video option will require you to upload a video file. If you have enough file space in your Shopify account, then you can go to the Settings > Files section to upload your MP4 file and optional OGV file. It's recommended to upload both files for maximum compatibility, but only the MP4 file needs to be specified. You can also host these files on a third-party server other than Shopify. You can then copy and paste the file URL into this field.
Image
You can upload an optional placeholder banner image that will display before clicking to view the video. And image size of 1600 x 900px is recommended.
Text
The text settings include options to add content on top of the video and select text position and alignment.
Headings
The Preheading, Heading, and Subheading fields let you add text to your video section. If you have a placeholder image enabled, the text will appear on the image, but disappear once the video starts to play.
If you do not have a placeholder image added, you will need to enable the Show text on video setting in order for the text to display.
Position
Control both the Horizontal position and Vertical position for your text and button. For Horizontal position, choose from Left, Center, and Right. For Vertical position, choose from Top, Middle, and Bottom.
Text alignment
Here you can choose the Text alignment of your text and button. Choose from Left, Center, or Right.
Button label/Button style
If you'd like to add a button to the text area (ex: Play video) you can enter the text into the button label field and choose between your Primary and Secondary button styles.
Overlay
To have an Overlay sit on top of the video section, configure the options included in the overlay settings. The overlay can come in handy if you have a 'busy' placeholder image as it will improve the legibility of any text added.
Overlay style
For the actual overlay, you have three options in the Overlay style setting: Full, Text only, and None. Full will enable the overlay across the entire video section, While Text only will enable the overlay only behind the text. Select None to disable.
Overlay/Gradient/Gradient rotation
You can use the Overlay color picker to select a color for the video overlay. If you'd like to add a gradient, you can use the Gradient color picker. If you add a gradient, you can adjust the 'gradient rotation' from 0 degrees to 180 degrees.
Background opacity
You can adjust the opacity of the overlay with the Background opacity setting – 0 is completely transparent (or invisible), while 100 is completely opaque.
Text width
The Text width setting controls how wide the text and buttons span across your video section. You can choose from 40% - 100%.
Layout
The layout settings include options to adjust the spacing and width in this section, and enable animation for when the Video section loads in.
Background
In the Background settings, you can select the Background color, add a Gradient to the background and if you've added a gradient, choose the Gradient rotation.
Width
The options under the Width setting include Half, Standard, and Wide. Selecting Wide will spread out the full width of the screen and Half will only span half of the width. Selecting Standard will keep the section in a container and not spread the full width.
Spacing
You can choose to add space (padding) above and below the section by adjusting the Top spacing and Bottom spacing settings. Use the Left spacing and Right spacing sliders to adjust the horizontal spacing.
Animation
The Animation setting will determine how the feature appears as it loads. The options for animation are None, Fade in, Fade in down, Fade in left, Fade in right, Slide in left, Slide in right, and Zoom.
Custom CSS
Add Custom CSS to the feature for further tweaking. You can even create your own CSS class here, as well. Check out this article for more information: Flex Guide: Custom CSS Feature