How to Autoplay Videos in Divi Video Module And Hide Controls

May 30, 2020 | Blog, Divi Tutorial | 83 comments

In this tutorial I will share the steps to autoplay videos in the Divi video module and hide the controls on the video.

Before we start with the tutorial it is important to know that it is not possible to autoplay videos with sound. Browsers will block the video from loading if you try to play it unmuted. You can learn more about the autoplay policy from Google at this link.

Another thing to note is that the autoplay code will only work on self hosted videos. This will not work for third party video players such as YouTube or Vimeo.

Now lets get started.

1. Add CSS Class To The Video Module

The first thing that you need to do is add a custom CSS Class to the Video module. This is so that the code does not affect all the video modules on your website.

You can add the CSS Class inside the Video Module Settings > Advanced > CSS ID & Classes > CSS Class. For this tutorial we will be adding the class lwp-video-autoplay to it.

Here is a screenshot to help you understand where to add the CSS Class in the video module settings.

Video Module Autoplay CSS Class

2. Add jQuery Code to Autoplay Video in Theme Options

Next you need to add the code below at your WordPress Dashboard > Theme Options > Integration > Add code to the < head > of your blog.

<script>
jQuery(document).ready(function() {
    if (jQuery('.lwp-video-autoplay .et_pb_video_box').length !== 0) {
        jQuery('.lwp-video-autoplay .et_pb_video_box').find('video').prop('muted', true);
        jQuery(".lwp-video-autoplay .et_pb_video_box").find('video').attr('loop', 'loop');
        jQuery(".lwp-video-autoplay .et_pb_video_box").find('video').attr('playsInline', '');

        jQuery(".lwp-video-autoplay .et_pb_video_box").each(function() {
            jQuery(this).find('video').get(0).play();
        });
        jQuery('.lwp-video-autoplay .et_pb_video_box').find('video').removeAttr('controls');
    }
});
</script>

That’s it. Now every video module on your website that has the class lwp-video-autoplay will autoplay the video on your website.

If you are not sure where to add the code then here is a screenshot to help you.

Divi Theme Options jquery code video auto play

The code above mutes the video, sets it to loop and hide the controls on it. If you want to disable looping of the video then you can delete the line number 5 from the code.

jQuery(".lwp-video-autoplay .et_pb_video_box").find('video').attr('loop', 'loop');

And if you want to show controls on the video then you need to remove the line number 11 from the code.

jQuery('.lwp-video-autoplay .et_pb_video_box').find('video').removeAttr('controls');

Leave a comment below if you found this helpful or have any questions. Don’t forget to subscribe to the Newsletter to receive the latest tutorials in your inbox.

83 Comments

  1. Joshua

    Hello,

    Can you modify the code to work with the Video Slider? If so may you provide that code? Thanks!

    Reply
    • LearnHowWP

      Add the same class to the slider module and then try the below code.

      jQuery(document).ready(function() {
      if (jQuery('.lwp-video-autoplay .et_pb_slide_video').length !== 0) {
      jQuery('.lwp-video-autoplay .et_pb_slide_video').find('video').prop('muted', true);
      jQuery(".lwp-video-autoplay .et_pb_slide_video").find('video').attr('loop', 'loop');
      jQuery(".lwp-video-autoplay .et_pb_slide_video").find('video').attr('playsInline', '');

      jQuery(".lwp-video-autoplay .et_pb_slide_video").each(function() {
      jQuery(this).find('video').get(0).play();
      });
      jQuery('.lwp-video-autoplay .et_pb_slide_video').find('video').removeAttr('controls');
      }
      });

      Reply
  2. Chaz DeSimone

    This not only looped and autoplayed, but your code even included hiding the controls. This is fantastic. I learned a little about jQuery in the process, too. Thank you!

    Reply
    • LearnHowWP

      You are welcome. Glad to know it helped.

      Reply
  3. Clementius

    Hi,

    Thank for sharing. This is great.

    Is there a way to have the video not be “muted”.

    I tried to remove the line #4 and also tried changing true to false, but then when I refresh my page the video doesn’t seem to play anymore automatically.

    Thank you very much in advance.

    Reply
  4. Maristella Mastrogiovanni

    Thanks for your help, but why autoplay doesn’t work on mobile and tablet devices?
    can you hel me?

    Reply
    • LearnHowWP

      I just learned that it could be because your phone or tablet has low battery or if they are on power saving mode.

      Reply
  5. Victor

    Thanks, this was really helpful! Is it possible to unmute the video when the user clicks on the video (or on a custom link)?

    Reply
    • LearnHowWP

      You can remove the following line of code to show the controls on the video. Users can then unmute it themselves. It might also be possible to keep the controls hidden and unmute when someone clicks on it but I will have to look in to it later.

      jQuery('.lwp-video-autoplay .et_pb_video_box').find('video').removeAttr('controls');

      Reply
      • Eric

        Hello and thank you for this code.
        I am also interested in turning the sound back on by clicking on the video. Have you had time to take a look?

        Reply
        • LearnHowWP

          Sorry not at the moment. I will look in to later today. Shouldn’t be too hard to do it.

          Reply
  6. anonyme

    Hello, is it possible to play only on scroll when the video appears on screen

    Reply
  7. Tristy

    Thank you so much worked perfectly and your descriptions made it super easy!

    Reply
    • LearnHowWP

      You are welcome Tristy

      Reply
  8. joe

    it doesnt work on my Divi, and actually it removed data on the first module of my homepage. After removing data came back. what I’m doing wrong?

    added the class id, pasted the jquery on the head section (in Theme Options)

    Reply
    • LearnHowWP

      Could you share a link to your website so that I can check it. You could create a test page and add the css class to a module on the test page so your original website remains unaffected. Share the url to the test page here.

      Reply
  9. Leo

    Thank you for your help!

    Reply
    • LearnHowWP

      You are welcome Leo!

      Reply
  10. Greg Fishback

    Strange, it didn’t work at all for me. I blew the page up. Can’t for the life of me figure how it caused that but it did.

    Reply
    • LearnHowWP

      I am sorry to hear that it did not work for you. Could you create a test page on your website and share it with me so I can check what might be going wrong. The code is pretty simple an basic. It should not affect anything other than the video.

      Reply
  11. Anas

    Hello, Thanks for this snippet.

    Let say we want the video never start until it’s in the viewport, how to make that happen?

    Reply
  12. Kathryn David

    This worked great accept on my phone. It does not play at all. Any modifications I should make in order to enable on phone?

    Reply
    • LearnHowWP

      It should autoplay on phones too. I read somewhere that a video will not autoplay if you are on power save mode or if you have low battery.

      Reply
      • Michael

        Thanks for that suggestion! I was wracking my head trying to figure out why it wouldn’t autoplay on my phone, didn’t even consider that having it on power save mode would affect that.

        Reply
        • LearnHowWP

          Glad to know it helped Michael.

          Reply
  13. Amit

    This worked fine. But the sound is muted. Any option for sound?

    Reply
  14. Alex

    Hello! How can I remove only the “donwload” button?

    Reply
    • LearnHowWP

      Here is the updated code with the code to hide the Download button in it.


      <script>
      jQuery(document).ready(function() {
      if (jQuery('.lwp-video-autoplay .et_pb_video_box').length !== 0) {
      jQuery('.lwp-video-autoplay .et_pb_video_box').find('video').prop('muted', true);
      jQuery(".lwp-video-autoplay .et_pb_video_box").find('video').attr('loop', 'loop');
      jQuery(".lwp-video-autoplay .et_pb_video_box").find('video').attr('playsInline', '');
      jQuery(".lwp-video-autoplay .et_pb_video_box").find('video').attr('controlsList', 'nodownload');

      jQuery(".lwp-video-autoplay .et_pb_video_box").each(function() {
      jQuery(this).find('video').get(0).play();
      });
      jQuery('.lwp-video-autoplay .et_pb_video_box').find('video').removeAttr('controls');
      }
      });
      </script>

      Reply
  15. Juana

    Hello, I need to eliminate the possibility of downloading the video in the video divi module, can you help me?

    Reply
    • LearnHowWP

      Here is the updated code with the code to hide the Download button included.


      <script>
      jQuery(document).ready(function() {
      if (jQuery('.lwp-video-autoplay .et_pb_video_box').length !== 0) {
      jQuery('.lwp-video-autoplay .et_pb_video_box').find('video').prop('muted', true);
      jQuery(".lwp-video-autoplay .et_pb_video_box").find('video').attr('loop', 'loop');
      jQuery(".lwp-video-autoplay .et_pb_video_box").find('video').attr('playsInline', '');
      jQuery(".lwp-video-autoplay .et_pb_video_box").find('video').attr('controlsList', 'nodownload');

      jQuery(".lwp-video-autoplay .et_pb_video_box").each(function() {
      jQuery(this).find('video').get(0).play();
      });
      jQuery('.lwp-video-autoplay .et_pb_video_box').find('video').removeAttr('controls');
      }
      });
      </script>

      Reply
  16. Mia

    Thanks works perfect, but if I don’t want to mute the video doesen’t work… please help!

    Reply
  17. Luke B

    Hi, thanks for this – it worked great. I also tried to see if the script would run ok from a code module on the page rather than running it on every page and it did for me πŸ‘
    Just in case people want to run a video on a specific page etc.

    Thanks again

    Reply
    • LearnHowWP

      Glad to know it helped Luke. πŸ™‚

      Reply
  18. Riccardo

    Hello, thanks for this help. I will use this script.
    Can you tell me how to set the video starts only when showing it or when passing over it?
    The video i’will put in the middle of the page and i don’t want it starts right way opening the page.
    Thank you so much
    Ric

    Reply
  19. Daniel Ospina

    thanks!

    super simple and works perfectly

    I also managed to reduce the load time of a gif by saving it as a video and then using this trick

    Reply
    • LearnHowWP

      Glad to know it helped Daniel!

      Reply
  20. Bryan

    This worked perfectly, thank you.
    I have been looking everywhere for this solution.

    Goodness knows why Divi don’t just add the option to the video module itself.

    Cheers!

    Reply
    • LearnHowWP

      You are welcome Bryan. Glad to know it helped. πŸ™‚

      Reply

Submit a Comment

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

Affordable Web Hosting With Great Customer Service

Starting At Just $1.44/Month