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
- Add your video in a video module
- Add a custom class to the video, e.g. joy-video-autoplay
(Under Video Module Settings > Advanced > CSS Class)
- Add the following jQuery to your Theme Options
(Under Theme Options > Integration > Add code to the < head > of your blog) - 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.
Thank you for this! I’ve been looking everywhere and couldn’t find how to do it. It worked a charm using option two.
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
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
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?
Hey JP!
Thanks for your feedback 🙂
Absolutely agree on using videos embedded from Vimeo/YouTube as preference. There are a couple of ways to do it:
1) a plugin like Divi Section Enhancer will support YouTube background videos: https://wordpress.org/plugins/dse-divi-section-enhancer/
2) installing custom JS framework like VidBacking: https://github.com/souravm84/vidbacking
Hope that helps 🙂
Cheers,
Brad
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…
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 🙂
Hi can this work if I only have divibuilder. I do not have divi theme options
Yes absolutely! Both of these options are in the Divi Builder only – and don’t require the theme options 🙂
Hi. Thanks for the great tutorial. Do you have any additional code to prevent autoplay on smartphones?
thank you
You’re welcome!
You helped a lot! Thank you very much for writing!
Thanks Peter, glad it helped out!
Thank you so much! Saved my proverbial bacon!
You’re very welcome!
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.
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!