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.

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. I don’t have a solution for this out of the box, but you could try to add a fallback background image to the video module.

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.

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

2. Go to the page or post where you want to embed the autoplayed video and enable the Divi Visual Builder.
3. Insert a Video module, hover the default Divi YouTube video in the Content tab and click the trash can icon to remove it.
4. 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.
5. 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.

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

2. Go to the page or post where you want to embed the autoplayed video and enable the Divi Visual Builder.
3. Insert a Video module, hover the default Divi YouTube video in the Content tab and click the trash can icon to remove it.
4. 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.
5. 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.

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

2. Go to the page or post where you want to embed the autoplayed video and enable the Divi Visual Builder.
3. Insert a Video module, hover the default Divi YouTube video in the Content tab and click the trash can icon to remove it.
4. 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.
5. 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.

1. Use the exact same code as in method 4 above.
2. 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.
3. Go to Divi » Theme Customizer » Additional CSS and add this snippet:

   .dm-autoplay-click {
   cursor: url('/my-folder/my-cursor.png'), auto;
   }

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