To autoplay video on a web page is a great way to display screen recordings and looping videos without using grainy and heavy gif animations. Here’s how to automatically play videos in Divi without breaking the autoplay policy from web browsers like Chrome, Firefox and Safari.
Join +3 054 subscribers!
Why autoplaying video can be complicated
Google Chrome decided to block autoplayed videos in April 2018. In fact, almost all major web browsers have the same tough policy on autoplay. Google Chrome sums up the reasons behind it:
Improved user experience, minimized incentives to install ad blockers, and reduced data consumption.
However, there are no rules without expectations. The Google Chrome policy states:
“Chrome’s autoplay policies are simple:
- Muted autoplay is always allowed.
- Autoplay with sound is allowed if:
- The user has interacted with the domain (click, tap, etc.).
- On desktop, the user’s Media Engagement Index threshold has been crossed, meaning the user has previously played video with sound.
- The user has added the site to their home screen on mobile or installed the PWA on desktop.
- Top frames can delegate autoplay permission to their iframes to allow autoplay with sound.”
In this tutorial, we are going to use the Divi video module, mute the video by default and enable autoplay. This way, the video will start playing automatically without being paused by the browser. Let’s go!
⚠️ Update November 24, 2022: I just learned that some mobile devices, for example iPhone, does not display autoplayed videos when the user has enabled Low Power Mode. You can use the Divi Conditions Options to hide and display different video modules based in device type and OS.
Autoplay does not work for Vimeo videos and YouTube videos
This method only works for self-hosted videos files, for example mp4 and mov videos, that you upload to your media library (or another server). Check out the tutorial How To Autoplay YouTube Videos In WordPress if you were looking for something else.
Method 1: Autoplay video and display control buttons on hover
Live demo: The video starts playing automatically. Hover the video to use the video controls for play, pause, timeline scroll, unmute, mute, volume control, full screen view and more options.
- Go to Divi » Theme Options » Integration and paste the code below in the second field: Add code to the < body > and click Save Changes.
<script> jQuery(document).ready(function($) { if ($('.dm-autoplay-btn .et_pb_video_box').length !== 0) { $('.dm-autoplay-btn .et_pb_video_box').find('video').prop('muted', true); $(".dm-autoplay-btn .et_pb_video_box").find('video').attr('loop', 'loop'); $(".dm-autoplay-btn .et_pb_video_box").find('video').attr('playsInline', ''); $(".dm-autoplay-btn .et_pb_video_box").each(function() { $(this).find('video').get(0).play(); }); } }); </script>Pro tip: If you don’t want the script to be read on all pages (for page speed reasons) an alternative method is to add the code in a Divi Code Module in the specific post(s) and page(s) where you want to to use autoplay.
- Go to the page or post where you want to embed the autoplayed video and enable the Divi Visual Builder.
- Insert a Video module, hover the default Divi YouTube video in the Content tab and click the trash can icon to remove it.
- Click Add video and choose an existing video from your WordPress Media Library or upload a new one. The formats mp4 and mov work fine. Save.
- Head over to Advanced » CSS ID & Classes in the Video Module and add the CSS Class dm-autoplay-btn
Save your changes and preview in frontend. The autoplay only works in frontend, not in the Visual Builder. Clear your browser cache and website cache if you can’t see the autoplay.
Method 2: Autoplay video and hide all control buttons
Live demo: The video starts playing automatically and all video control buttons are hidden both on idle and on hover. This is the same style that Elegant Themes use on their homepage to display the Divi Visual Builder user interface.
- Go to Divi » Theme Options » Integration and paste the code below in the second field: Add code to the < body > and click Save Changes.
<script> jQuery(document).ready(function($) { if ($('.dm-autoplay .et_pb_video_box').length !== 0) { $('.dm-autoplay .et_pb_video_box').find('video').prop('muted', true); $(".dm-autoplay .et_pb_video_box").find('video').attr('loop', 'loop'); $(".dm-autoplay .et_pb_video_box").find('video').attr('playsInline', ''); $(".dm-autoplay .et_pb_video_box").each(function() { $(this).find('video').get(0).play(); }); $('.dm-autoplay .et_pb_video_box').find('video').removeAttr('controls'); } }); </script>Pro tip: If you don’t want the script to be read on all pages (for page speed reasons) an alternative method is to add the code in a Divi Code Module in the specific post(s) and page(s) where you want to to use autoplay.
- Go to the page or post where you want to embed the autoplayed video and enable the Divi Visual Builder.
- Insert a Video module, hover the default Divi YouTube video in the Content tab and click the trash can icon to remove it.
- Click Add video and choose an existing video from your WordPress Media Library or upload a new one. The formats mp4 and mov work fine. Save.
- Head over to Advanced » CSS ID & Classes in the Video Module and add the CSS Class dm-autoplay
Save your changes and preview in frontend. The autoplay only works in frontend, not in the Visual Builder. Clear your browser cache and website cache if you can’t see the autoplay.
Method 3: Autoplay video and add unmute on click
Live demo: The video starts playing automatically and all video control buttons are hidden both on idle and on hover. If the user clicks anywhere in the video frame, the sound will be unmuted and start playing.
- Go to Divi » Theme Options » Integration and paste the code below in the second field: Add code to the < body > and click Save Changes.
<script> jQuery(document).ready(function($) { if ($('.dm-autoplay-click .et_pb_video_box').length !== 0) { $('.dm-autoplay-click .et_pb_video_box').find('video').prop('muted', true); $(".dm-autoplay-click .et_pb_video_box").find('video').attr('loop', 'loop'); $(".dm-autoplay-click .et_pb_video_box").find('video').attr('playsInline', ''); $(".dm-autoplay-click .et_pb_video_box").each(function() { $(this).find('video').get(0).play(); }); $('.dm-autoplay-click .et_pb_video_box').find('video').removeAttr('controls'); } $('.dm-autoplay-click' ).on( 'click', function() { var $video = $( this ).find( 'video' ); var muted = $video.prop( 'muted' ); $video.prop('muted', muted = !muted ); }); }); </script>Pro tip: If you don’t want the script to be read on all pages (for page speed reasons) an alternative method is to add the code in a Divi Code Module in the specific post(s) and page(s) where you want to to use autoplay.
- Go to the page or post where you want to embed the autoplayed video and enable the Divi Visual Builder.
- Insert a Video module, hover the default Divi YouTube video in the Content tab and click the trash can icon to remove it.
- Click Add video and choose an existing video from your WordPress Media Library or upload a new one. The formats mp4 and mov work fine. Save.
- Head over to Advanced » CSS ID & Classes in the Video Module and add the CSS Class dm-autoplay-click
Save your changes and preview in frontend. The autoplay only works in frontend, not in the Visual Builder. Clear your browser cache and website cache if you can’t see the autoplay.
Bonus: Add a custom mouse cursor to unmute on click ️
Live demo: Let’s get creative! The video starts playing automatically and all video control buttons are hidden both on idle and on hover. If the user hovers the video, a custom image mouse cursor is displayed and the video will be unmuted if the user clicks anywhere in the video frame.
- Use the exact same code as in method 4 above.
- Upload a custom mouse cursor icon to your WordPress Media Library. Read our blog post How To Use Images As Mouse Cursors for specifications on formats and more.
- Go to Divi » Theme Customizer » Additional CSS and add this snippet:
.dm-autoplay-click { cursor: url('/my-folder/my-cursor.png'), auto; } - Replace /my-folder/my-cursor.png with the URL to your mouse cursor image file.
Save your changes and preview in frontend. The autoplay only works in frontend, not in the Visual Builder. Clear your browser cache and website cache if you can’t see the autoplay.
That’s all for today!
I hope that you enjoyed this post. Subscribe to DiviMundo on YouTube and join our Facebook group for more crisp content on WordPress and web design.
👉 Related post: How To Create Stunning Mobile Menus With Divi Toolbox
👉 Free course: Create a website from scratch with Divi
Hi!
Thank you for the tutorial !!
Do you know how it is possible to start the video when it appears by scrolling (video in the middle of the page) ?
Thanks for your help
Hi Owenj! That’s a good question. Perhaps you can add lazyload to the video module, using a lazy load plugin. That way, the video module is not loaded until it appears on the screen. I haven’t tested it myself, but it’s worth trying.
This works fine on desktop but it doesn’t work on mobile and iPad view.
Can you help clarify on this issue?
Hi Kim! I just watched the three demo videos in this post on my iPhone and the autoplay works fine on both Safari and Chrome. Which OS and browser do you use? And is it any specific part that doesn’t work for you?
Hi again Kim! I think I’ve figured it out! Do you get the same result if you have Low Power Mode disabled on your mobile devices? It seems like iOS disables all autoplayed videos when Low Power Mode is enabled (which kind of makes sense).
It doesn’t work
Sure it does, I’m looking at the autoplaying videos in the post right now (the site is using the latest version of WP and Divi). However, some operating systems (like iOS) will pause autoplay if you have activated energy saving mode on the device.
It doesn’t work for me either, I copied and pasted everything as per the instructions and I keep seeing the controls and no autoplay at all
Does the autoplay demo video in this post work in your browser?
Hello,
This works great for individual videos. For sliders, Method 3 plays all the video audios at once. How do you suggest I alter the code to play one video after the other?
Thanks!!!
Hi Cheryl! I haven’t tried it on the Video Slider before (just the Video module) but I think that I found a tweak that works also for the slider.
Replace the code in the body tag with this:
Let me know how it goes! 🙂
Pretty nice – works fine until your website is called from a non-Chrome browser. Microsoft Edge (not surprisingly) completely ignores the css that removes the control bar. Have not tried it with Fire Fox and I won’t it’s more a of trash browser than Edge. Bottom line, if your visitor refere is Chrome, you golden. If not your out of luck.
Hi Bryan! I’ve tested it with Chrome, Firefox and Safari before and it works fine. I tested it with Edge (using the default settings) on my moms old PC just now, and all three demo videos in the post works as they should. Maybe there is some conflicting settings in your browser or device.
Cheers! This is great.
I wonder, if there’s a way to have it start paused and then resume playing on hover?
Hi Sebastian!
Add the class dm-autoplay-hover to the video module and add this script instead (don’t forget the opening and closing SCRIPT tag, like in the “click to play” code – I can’t add it here in the comments since WP will remove the code):
jQuery(document).ready(function($) {if ($('.dm-autoplay-mouseover .et_pb_video_box').length !== 0) {
$('.dm-autoplay-mouseover .et_pb_video_box').find('video').prop('muted', true);
$(".dm-autoplay-mouseover .et_pb_video_box").find('video').attr('loop', 'loop');
$(".dm-autoplay-mouseover .et_pb_video_box").find('video').attr('playsInline', '');
$(".dm-autoplay-mouseover .et_pb_video_box").each(function() {
$(this).find('video').get(0).play();
});
$('.dm-autoplay-mouseover .et_pb_video_box').find('video').removeAttr('controls');
}
$('.dm-autoplay-mouseover' ).on( 'mouseover', function() {
var $video = $( this ).find( 'video' );
var muted = $video.prop( 'muted' );
$video.prop('muted', muted = !muted );
});
});
Let me know how it goes!
Ps. I just updated to code. The first one with “hover” will not work. Use “mouseover” instead.
Hello, how do I make the video play with audio and not silently?
Hi! Web browsers like Chrome will block videos from autoplaying if there aren’t muted. You can read more about it here.
Hi Victor,
Thank you for all this information!
I’ve put the code on my girlfriend’s website (www.piaseefried.de) and it works perfectly everywhere but not on Iphones. I’ve asked 3 different persons on Iphone and the video area is showing a grey background. The control buttons are showing on top of the grey but none of the buttons are making the video play.
Is there a way that if the autoplay is blocked by Iphone that at least the user can hit the play button to start the video?
I read about the “add a fallback background image to the video module”. I’m not sure what you mean or how to do that. Could you precise?
Hi Samuel! When I visit your site with my iPhone I can see the video autoplaying. If the device is on battery save mode, I need to click the play icon to make it play (this is an iOS default setting) but it still works.
But maybe there is something in the iOS settings or country specific regulations that creates the conflict. You could actually use the Divi Conditions Options to display the autoplaying video module (with the autoplay CSS class) for all devices that are NOT iOS, and then create another video module below it WITHOUT the autoplay CSS class and make it display for all devices that ARE iOS devices. You can read more about this feature at: https://www.elegantthemes.com/blog/theme-releases/divi-condition-options
You will need to clear the page cache (and possibly disable cache on the pages with autoplaying video) in order for the conditions feature to work properly.
Let me know how it goes! 🙂
Hi Victor,
The issue is fixed. The problem was the resolution of the video file. It was slightly off the standard resolution and somehow every iPhone did not want to play the file, only computers and Android devices…
Everything is working pretty well now.
I was wondering if there is a way to have a code that mixes the click to unmute and still shows the command buttons over the video? I tried to change the code myself but the only thing I could achieve is to unmute and pause the video simultaneously, then the next click would play and mute… which is not quite helpful.
Thnak you for your help.
Best,
Samuel Trepanier
Any update about that?
No, sorry I can’t help you. Perhaps you can try the Divi Theme Users Facebook group.
Hi Victor,
Thank for your wonderful guildeline for setting up autoplay function in divi. I would like to ask is it possible to autoplay video only on hover?
Sincerely,
Thanks Hung! I don’t have solution out of the box, but you could try this using the Divi Code Module instead: https://codepen.io/aperazzi/pen/eeQYMQ
Thank you, I will try it out.
Working perfectly, thanks for this. I mistakenly used the wrong class name for the js I was using, so I thought it was a bust. Once I figured out my mistake, I was super-jazzed to see it auto-playing with no controls.
I’m glad to hear that it worked out Bill 🍻
Hi Victor, thanks for the awesome info. If I have a page with multiple videos. Is it possible to only autoplay the first one? I’m thinking CSS Class or ID but can’t figure where to put it.
Sure, just add the CSS class (for example “dm-autoplay-btn” for the first method) to the video module that you want to autoplay. Only video modules with the CSS class will autoplay. Check out the video in top of this post to see where to insert the class.
These are great techniques for handling video autoplay.
One thing I found was that if you put in an Overlay Image for the video this script will not work.
Thanks for the feedback and the heads up, Charles!
Hi there, thanks – this is great. How can I stop it from looping?
Hi Sarah! Just remove the entire line that contains “loop”. Here’s one example:
jQuery(document).ready(function($) {
if ($('.dm-autoplay-btn .et_pb_video_box').length !== 0) {
$('.dm-autoplay-btn .et_pb_video_box').find('video').prop('muted', true);
$(".dm-autoplay-btn .et_pb_video_box").find('video').attr('playsInline', '');
$(".dm-autoplay-btn .et_pb_video_box").each(function() {
$(this).find('video').get(0).play();
});
}
});