Autoplay Videos in Divi

Aug 17, 2020 | Wordpress

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:

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)
  1. Add the following jQuery to your Theme Options
    (Under Theme Options > Integration > Add code to the < head > of your blog)
  2. 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.

Browse More Hints & Tips

How to Choose the Best Website Address (Domain/URL)

How to Choose the Best Website Address (Domain/URL)

This article was first written 24 Sept 2011, and has been updated August 2020. What is a website address? Your website address, or domain name, is used to identify and access your website. It looks something like www.yourwebsite.com. No two website addresses...

18 Comments

  1. Matt G

    Thank you for this! I’ve been looking everywhere and couldn’t find how to do it. It worked a charm using option two.

    Reply
  2. Kinné Anthony

    Hi
    Thank you for these explanations, but how to remove the “mute” mode for the video with Option One
    Using the Divi Video Module to Autoplay Videos

    I tried by removing line 5, but it didn’t work… Could you help me please ?

    Best regards,

    Anthony

    Reply
    • brad

      Hi Anthony,
      Sorry for the delay in replying, have only just seen your comment!
      As mentioned in the article, you can’t autoplay an unmuted video in most browsers – this behaviour is blocked to prevent annoying issues with autoplaying sound.

      You can change the ‘true’ in line 5 to ‘false’, which will tell the browser to unmute the video, but beware that many browsers will mute the audio anyway, or prevent the video from autoplaying.
      Cheers,
      Brad

      Reply
  3. JP

    This is a great tip, the issue is that self-hosted video on the typical person’s hosting plan is going to make that video load like a dog. So something like an embedded Vimeo (pro to hide ads, etc.) background would be ideal. Some kind of 3rd party CDN-based external embed like a vimeo, youtube, vidyard, etc. would be great. No idea why Divi makes muted auto-play fullwidth background a challenge to accomplish – even for locally-hosted, the concept of video backgrounds has been everywhere for ages. It’s super simple to do all of this in Elementor, but Divi has everyone hacking away with jquery fixes like this and it can only be done w/ self-hosted files. 98% of sites out there running on shared hosting like bluehost, godaddy or anything for less than 50-100/mo will choke on that 5-20mb local video file loop unless that asset is external. Wish I could find a post like this that didn’t end with …btw, this awesome work-around only works with a self-hosted video. Any thoughts/suggestions?

    Reply
  4. Monika

    Hi,
    is there any way to make it work on Chrome? Also on Safari in my iPhone it also doesn’t autoplay 🙁 It just works on Firefox…

    Reply
    • brad

      Hi Monika, these methods will work on all browsers. If it’s not working for you it’s likely to be another issue – perhaps the muting? As Chrome won’t autoplay videos that aren’t muted properly, whereas Firefox has been known to. Hope that helps 🙂

      Reply
  5. Triana

    Hi can this work if I only have divibuilder. I do not have divi theme options

    Reply
    • brad

      Yes absolutely! Both of these options are in the Divi Builder only – and don’t require the theme options 🙂

      Reply
  6. Noor

    Hi. Thanks for the great tutorial. Do you have any additional code to prevent autoplay on smartphones?

    Reply
  7. sweety

    thank you

    Reply
    • brad

      You’re welcome!

      Reply
  8. Peter Balogh

    You helped a lot! Thank you very much for writing!

    Reply
    • brad

      Thanks Peter, glad it helped out!

      Reply
  9. Carrie

    Thank you so much! Saved my proverbial bacon!

    Reply
    • brad

      You’re very welcome!

      Reply
  10. Pat

    Hi – I don’t seem to be able to make this autoplay at all. I have the video in a popup-section (using ‘popups for divi’ plugin). The overlay with play icon is there. Tried without that but nothing plays. Video has sound but I have the mute setting. Any idea what would interfere with this I see it works for everyone else 🙂 Video mdule style is correct and integration code there. All names/spelling etc match. Thanks.

    Reply
    • brad

      Hi Pat! Unfortunately this solution won’t work in popups, as the code need to be different (the selector will change, and you’ll want to trigger the autoplay when the popup shows, not when the webpage loads). For this, you’ll want to get a developer to take a look at your website and provide a custom solution. If you’d like help with this, let me know via another comment and I’ll send you a private email for more info 😀 Cheers!

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *