Autoplay Videos in Divi

Setting videos to autoplay has bugged website developers for years, and in Divi there are no default options to Autoplay your videos. Some people suggest setting your video as a background to allow autoplay, but this comes with its own issues (like setting the dimensions of the video, and incompatibility with mobile devices).

Fortunately it's nice and easy to Autoplay your videos with a little code, and there are two methods to choose from:

• Using the Divi video module
• Using the custom code module

Regardless of which method you choose, it's not possible to Autoplay videos with sound. We all know how annoying that is, and browsers will block this behaviour. Make sure your videos are muted in order for them to play correctly (instructions below for muting videos properly). For more information on Google's video Autoplay policies, click there.

Option One

Using the Divi Video Module to Autoplay Videos

1. Add your video in a video module
   
2. Add a custom class to the video, e.g. joy-video-autoplay
   (Under Video Module Settings > Advanced > CSS Class)

3. Add the following jQuery to your Theme Options
   (Under Theme Options > Integration > Add code to the < head > of your blog)
   
4. That's it! All videos with the class joy-video-autoplay will now autoplay.

<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>

‍

To stop the video from looping, remove line 7.
To show the controls, remove line 13.
This method only works with self-hosted videos, not YouTube / Vimeo

Option Two

Using the Divi Code Module to Autoplay Videos

Everyone seems to forget that not everything has to be run through Divi - sometimes it's quicker and easier to do it yourself. Using the Divi Code Module, you can add the following code to place an autoplaying video on your website.

<div class="et_pb_video_box"><video width="100%" height="auto" preload="auto" autoplay loop muted playsinline><source src="/wp-content/uploads/2020/01/path-to-video.mp4" type="video/mp4" ></video></div>

To stop the video from looping, just remove the word "loop" from line 2.
This method will show no controls, and only works with self-hosted videos.

‍