Integrating background videos into your website can greatly enhance its visual appeal and user engagement. One key feature to maximize the impact of these videos is the autoplay option, which ensures that your videos start playing automatically when a visitor lands on your page.
In this article, we'll guide you through the steps to enable and customize autoplay options for background videos on your site.
Whether you're looking to captivate visitors with stunning visuals or convey a message quickly, this guide will help you leverage autoplay effectively.
Notes:
All modern mobile device browsers will block Videos from auto-playing without user interaction. Using the Background Video feature, you can have your videos automatically play even on mobile devices.
In order for the video file to auto-play even on mobile devices, the video file will be automatically muted. This is required to avoid the auto-play feature being blocked by browsers on mobile devices.
While you can set a video file as the background video for each Divi element (Section, Row, Column, and Module), you might need to display a video file as a stand-alone module. In this case, Divi's Divider module comes in handy.
How to use the Divider module to display auto-playing videos
In your page layout, where you want to display an auto-playing video, add the Divider module
Open the Divider module's setting by clicking on the Gear icon
In the Content tab → Visibility, set the Show Divider option to No
In the Content tab → Background → Background Video upload both mp4 and webm video formats
Set the Video's width value and Video's Height Value
in the Design tab → Spacing → Padding, set the top and bottom padding values. The value used will depend on your video's height. Ensure the values are expressed in %.
