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.

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!

Autoplay does not work with Vimeo videos or 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). I have not found a solid method for auto playing YouTube videos or Vimeo videos. If you know one, please let me know in the comments below.

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 Vertically Align Content in Divi (by Elegant Themes)

👉 Free course: Create a website from scratch with Divi

Related posts

0 Comments

Submit a Comment

Your email address will not be published.

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