While Divi itself lacks built-in autoplaying video functionality, you can implement this by making minor adjustments to certain Divi modules.
Divi modules like Code, Video and Divider let you enable autoplay for both self-hosted and YouTube videos.
In this article, we’ll show you how to autoplay video in Divi using these modules.
Rules You Need to Know About Auto Playing Videos in Divi
Autoplaying video in Divi requires following certain rules due to browser restrictions, some of them are:
- Muted Autoplay: Modern browsers such as Google Chrome require a mute function for any video with autoplay.
- MP4/MOV Preferred: These formats offer wide browser support and work well with Divi.
- Limited Looping: Looping is not available for all methods, for example, YouTube videos. But with custom coding, you can achieve this.
- Vimeo Videos: Due to Vimeo’s policies and browser restrictions, Divi doesn’t support autoplay for Vimeo video.
Method 1: Autoplay Youtube Video with Divi Code Module
Step 1: Select the YouTube video you want to autoplay, then copy it’s embed code.
Step 2: Enable Divi Visual Builder, and add code module to your chosen page or post. Paste the copied embed code into the module.
Step 3: Next, append “?autoplay=1&mute=1” directly after the ‘’src’’ attribute within the embed code.
Note: By following these steps, your chosen YouTube video will autoplay on your Divi site with muted audio. When visitors hover over the video, the YouTube control bar with play/pause, adjust volume, etc. will appear.
Method 2: Autoplay Self Hosted Video With Divi Code Module
Step 1: Upload your video to the media library and copy its file URL.
Step 2: Enable the visual builder, and insert code module on your selected page or post. Then paste the following code inside the code module:
<video width="100%" playsinline controls loop muted autoplay>
<source src="video-example.mp4" type="video/mp4">
Step 3: Replace the “video-example.mp4” with your copied video file URL and save changes.
Note: With this method, you can enable video autoplay on your Divi website with mute, loop, and control functionalities. Plus, on hover, users can control playback, adjust volume, go full screen, and more.
Method 3. Autoplay Your Uploaded Video With Divi Video Module
Step 1: Go to your chosen page or post, insert the video module, and upload your video file (in MP4 or WEBM format).
Step 2: Apply a custom CSS class by accessing Advanced > CSS ID & Classes > CSS Class (e.g., joy-video-autoplay)
Step 3: Now add jQuery code by going to Dashboard > Theme Options > Integration > Add code to the <head> of your blog. Then, paste the following code to activate autoplay on all pages and posts, and then save the changes.
<script>
jQuery(document).ready(function() {
if (jQuery('.joy-video-autoplay .et_pb_video_box').length !== 0) {
jQuery('.joy-video-autoplay .et_pb_video_box').find('video').prop('muted', true);
jQuery(".joy-video-autoplay .et_pb_video_box").find('video').attr('playsInline', '');
jQuery(".joy-video-autoplay .et_pb_video_box").find('video').attr('loop', 'loop');
jQuery(".joy-video-autoplay .et_pb_video_box").each(function() {
jQuery(this).find('video').get(0).play();
});
jQuery('.joy-video-autoplay .et_pb_video_box').find('video').removeAttr('controls');
}
});
</script>
Step 4: Now exit the visual builder to preview the autoplay effect. You can remove line 6 to stop loop effect and line 10 to show control
Pro Tips: Instead of activating autoplay across all pages and posts, you can activate it for a single page or post. Just open the page or post, add Divi Code module, and insert the jQuery code there.
Method 4: Autoplay Server Hosted Video With Divi Divider Module
Step 1: Enable the visual builder on your desired page or post. Insert a Divider module and turn off the Visibility option.
Step 2: Now from the “Background” option, select ‘’Background Video’’ and upload your video clip.
Step 3: Set your preferred aspect ratio by adjusting the width and height. (e.g., height 500 pixels).
Note: By using this autoplaying method, the video will loop automatically with no control and audio. Plus, it is also possible that mobile devices will not be compatible with the video.
Closing Thoughts
By now, you should have a comprehensive understanding of how to autoplay video in Divi. We recommend following the first method to auto-play YouTube videos while following the third method for self-hosted videos.
You can also go for the second and fourth methods for self-hosted videos if you want to achieve video auto-play on any specific page or post. Let us know which one you prefer and which you think is the easiest to use.
0 Comments