3 Ways To Autoplay Video In Divi (Without Plugins)

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 790 subscribers!

Updated October 14, 2023: The code was improved and optimized. The old code still works fine though.

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!

⚠️  Troubleshooting: 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.

  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($) {
        var $videoBoxes = $('.dm-autoplay-btn .et_pb_video_box');
        
        if ($videoBoxes.length !== 0) {
            $videoBoxes.find('video')
                .prop('muted', true)
                .prop('loop', true)
                .prop('playsInline', true);
            
            $videoBoxes.each(function() {
                this.querySelector('video').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($) {
        var $videoBoxes = $('.dm-autoplay .et_pb_video_box');
    
        if ($videoBoxes.length !== 0) {
            $videoBoxes.find('video')
                .prop('muted', true)
                .prop('loop', true)
                .prop('playsInline', true)
                .removeAttr('controls');
            
            $videoBoxes.each(function() {
                this.querySelector('video').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

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($) {
        var $videoBoxes = $('.dm-autoplay-click .et_pb_video_box');
    
        if ($videoBoxes.length !== 0) {
            $videoBoxes.find('video')
                .prop('muted', true)
                .prop('loop', true)
                .prop('playsInline', true)
                .removeAttr('controls');
            
            $videoBoxes.each(function() {
                this.querySelector('video').play();
            });
        }
    
        $('.dm-autoplay-click').on('click', function() {
            var $video = $(this).find('video');
            var muted = $video.prop('muted');
            $video.prop('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 3 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

Related posts

51 Comments

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

    Reply
    • 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.

      Reply
  2. This works fine on desktop but it doesn’t work on mobile and iPad view.

    Can you help clarify on this issue?

    Reply
    • 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?

      Reply
  3. 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).

    Reply
    • 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.

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

        Reply
        • Does the autoplay demo video in this post work in your browser?

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

    Reply
    • 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! 🙂

      Reply
  5. 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.

    Reply
    • 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.

      Reply
  6. Cheers! This is great.
    I wonder, if there’s a way to have it start paused and then resume playing on hover?

    Reply
    • 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.

      Reply
      • I have test the code. The video plays first. When i hover, the video paused and stays paused.
        (I was hoping the video is paused. When I hover it starts.)

        Reply
        • Sorry, I don’t follow. Does the live demo example in the post have the same behaviour? It uses the same code that is provided in the post.

          Reply
  7. Hello, how do I make the video play with audio and not silently?

    Reply
    • Hi! Web browsers like Chrome will block videos from autoplaying if there aren’t muted. You can read more about it here.

      Reply
  8. 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?

    Reply
    • 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! 🙂

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

      Reply
        • No, sorry I can’t help you. Perhaps you can try the Divi Theme Users Facebook group.

          Reply
  9. 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,

    Reply
  10. 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.

    Reply
    • I’m glad to hear that it worked out Bill 🍻

      Reply
  11. 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.

    Reply
    • 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.

      Reply
  12. 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.

    Reply
    • Thanks for the feedback and the heads up, Charles!

      Reply
  13. Hi there, thanks – this is great. How can I stop it from looping?

    Reply
    • 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();
      });
      }
      });

      Reply
  14. The information “Troubleshooting: Some mobile devices, for example iPhone, does not display autoplayed videos when the user has enabled Low Power Mode. ” save me a lot of time, thank you

    Reply
  15. This is fantastic and works brilliantly, I’ve chosen the “unmute on click” option and I considered changing the mouse icon on hover for desktops, but of course, this wouldn’t work for mobile devices.
    Do you by any chance know how I could add a small audio icon in the top corner of the video that the user could click, to make it more visually obvious on a mobile phone.
    Not sure if it makes any difference, but my video is a background video.

    Thanks in advance. 🙂

    Reply
  16. Hi,
    My video isn’t playing inline, it opens fullscreen when hit play and doesn’t autoplay on mobile, any adjustments needed? Did code install #3

    Reply
    • That’s strange, the live videos in this post use the same code that is provided in the post. Perhaps there is custom code or a plugin that causes a conflict on your website. Autoplay on mobile is disabled by some mobile browsers and OSes (and it’s always disabled if the user has enabled battery save mode).

      Reply
      • Hmm, ok i’ll keep looking, it’s a brand new site with basically no plugins and I had to do a separate HTML code implementation for mobile only to get it to play inline but it has controls and not liking how it looks compared to the code you provided

        Reply
  17. Hello, I’ve tried the code for a video slider. The autoplay and automute work very well. However, it doesn’t automatically switch to the next video. Can you help me with this?

    Reply
    • I’m afraid that automatic animation is only available in the regular Divi Slider module, not in the Video Slider module. You could probably fix it with some custom JS but I don’t have any solution up my sleeve at the moment.

      Reply
  18. Ok, thanks a lot!

    Reply
  19. This works very well! Thanks a lot!!

    Reply
  20. Love this solution! I am building a video carousel with PeeAye’s carousel maker and would love to have ONLY the current video in viewport autoplay. As in this example: https://circle.so/community-builder-summit Any ideas on how to make that happen? Much appreciated!

    Reply
    • Thanks Rob! Perhaps there’s a unique class for the current slide in the Pee Aye carousel? If so, you could try to apply autoplay to that class only.

      Reply

Submit a Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Affiliate Disclaimer

All content on DiviMundo is funded by you – our beloved readers. Some of the links are affiliate links. This means that if you click on the link and purchase something, I will receive an affiliate commission. But it will never cost more for you. Thanks for your support!

Victor Duse, founder of DiviMundo