How to Autoplay Video in Divi?

An autoplay video can be proven worthy enough to grab visitor’s attention while they browse a website. So, placing a video in divi with autoplay & mute features can enhance your brand awareness tremendously among visitors.
Since the divi theme has no module for the autoplay feature, you might be curious about how to autoplay video in divi? However, there are a couple of ways in divi to achieve the autoplay effect for your video. So today, we are going to learn all the possible techniques to autoplay video in divi.

What You Will Learn Today?

• Youtube embedded video using the Divi Code Module.
• Absolute path video with one click using Divi Video Module.
• Absolute path video with the Divi Code Module.
• Absolute path video with the Divi Divider Module.

Roles You Need To Be Aware Of

Whatever method you choose to show your video on the website, you need to be careful about browser policies. Here, we have explained two major policies for you to be straight in the success line.

• The autoplay video should be muted as it can be the reason for bad experiences for users. Keeping that in mind, web browsers, including Google Chrome, made a policy to prevents loading autoplay videos that are not muted.
• Another annoying thing for visitors is to watch a video without having control over the volume, on-off, minimize-maximize options. As a result, in some cases, without the Control attribute, an autoplay video can’t be loaded for the visitors.

No worries, today we will take you through the path to learn how to autoplay video in divi with muted, control & loop features. So, without further ado, let’s jump to the point.

How to Autoplay Youtube Video in Divi?

Adding embedded youtube videos on the divi website is a very famous and hassle-free technique for web owners. Providing the autoplay mode to the youtube videos is easy and can be achieved with the divi code module.
Here is how we can do that-

Step 1
In the first step, you need to copy the embedded code of a particular youtube video and paste it on the text feature of the divi code module. Now, we will change the code slightly to start the video autoplay & mute effect.

Step 2
In the second step, Just input a simple code “?autoplay=1&mute=1” immediately after the src link. As a result, the autoplay & mute option will be added to that embedded video.
Thus, you can compare steps 1 & 2 images where we slightly changed the code to get these features for the video.

Autoplay video Using Divi Video Module

Divi video module brings an excellent way to Implement autoplay, mute & loop effects to the video. Also, you can apply these effects to every single video on any webpages with just one click. Follow our instructions step by step.

Step 1
First & foremost, insert a video module and import a video file in both the MP4 & WEBM for maximum support capabilities in several browsers.

Step 2
Next, go to the advanced tab and add a CSS Class for the video, which we named “autoplay-video.” Now, remember the CSS class name you added here because it will require afterward, and you are done with the divi video module.

Step 3
At this stage, you have two different paths to implement a custom code targeting the CSS Class given above.
Firstly, if you want to implement the code on a single web page to autoplay video of that page, insert a divi code module; next, insert the following custom code script and the same CSS class name inside the text feature of the code module. As a result, you will get the autoplay, muted, control, & loop effects for all the videos on that page.

<script>
jQuery(document).ready(function() {
    if (jQuery('.autoplay-video .et_pb_video_box').length !== 0) {
        jQuery('.autoplay-video .et_pb_video_box').find('video').prop('muted', true);
        jQuery(".autoplay-video .et_pb_video_box").find('video').attr('loop', 'loop');
        jQuery(".autoplay-video .et_pb_video_box").find('video').attr('playsInline', '');
        jQuery(".autoplay-video .et_pb_video_box").each(function() {
            jQuery(this).find('video').get(0).play();
        })
    }
});
</script>

Or

Secondly, you need to go to the website dashboard and click on the divi theme icon. Afterward, hit the divi theme option setting and click on the integration feature from the menu. Next, add the same custom code script to the Add code to the < head > of your blog section. Now, you need to provide the CSS Class name “autoplay-video” in the script you gave in the advanced tab of the divi video module.
Note, every video on the website with this CSS class name “autoplay-video” will get the autoplay, mute & loop effects.

How to Autoplay Absolute Path Video in Divi

Often web owners seek the tactic to autoplay absolute path video in divi theme. Today you will receive a proper guideline on autoplay absolute path video using the divi code module.

Step 1
First, you need to go to your website media library and upload or select a video to continue with.

Step 2
After clicking on a particular video, you will get an absolute path address written as a File URL. Now, copy that URL.

Step 3
At this moment, come to the divi code module and provide a simple code of HTML video-tag inside the text feature. Past the absolute path address URL inside the video tag, and your video will play automatically with mute, loop & controls features.

We have created the HTML video tag code for you, copy and paste it to your module, and replace the absolute path URL.

<video width="100%" playsinline controls loop muted autoplay> <source src="#" type="video/mp4"></video>

How to Autoplay Video Using the Divi Divider Module?

Activating the autoplay effect for a video in divi is completely effortless using any modules. However, we are using the divider module here, but you can use any divi module, row & section to achieve the same thing. All you need to do is follow the instructions demonstrated below.

Step 1
At the beginning of the design process, you have to go to the background feature of the divi divider module. Then, upload a video as background in two different formats to meet each browser’s requirements.

Step 2
In the second stage, you need to make sure that the Show Divider option of the visibility feature is turned off. For other modules, you need to change things accordingly.

Step 3
Finally, Navigate to the sizing feature of the divider module to apply a design-compatible width and max-width for the module. I am keeping the width 75% and module height 500px with other attributes as default.
However, these values are adjustable as required.
Note: if you follow this procedure to add autoplay video in divi, you can’t provide control features for the video.

Leave a comment below if the tutorial was helpful enough for you. In addition, we are always pleased to answer any queries regarding divi that you may have.