Introduction

In this tutorial, we will show you how to make a video autoplay when a page loads in Divi. Additionally, we’ll ensure the video plays in a continuous loop. This engaging feature can enhance user experience and engagement on your website.

Prerequisites:

  1. A WordPress website using the Divi theme.
  2. A video file that you want to use on your web page.

Step 1: Upload Your Video

  • Start by logging in to your WordPress admin dashboard.
  • Navigate to the “Media” menu and upload the video you want to use. Remember the file’s name as you will need it later.

Step 2: Create a New Page in Divi

  • Now, let’s create a new page where you want to add the autoplaying video.
  • Go to the “Pages” menu and click “Add New.”
  • Give your page a title and click “Use Divi Builder.”

Step 3: Insert the Video Module

  • In the Divi Builder, insert a new row by clicking the “+ Add Row” button.
  • In the row, add a “Video” module.
  • By default, you might see a YouTube video. Remove it.

  • Click the “Upload” button and select your video from the media library.
  • Ensure that your video module has a unique class name, which we’ll use later to target it. You can set this in the module’s settings.

Step 4: Adding the Autoplay and Loop JavaScript

  • To make the video autoplay and loop, we’ll use JavaScript. Open a code editor or notepad and paste the following JavaScript code:

document.addEventListener(“DOMContentLoaded”, function() {
var videoBoxes = document.querySelectorAll(‘.dm-autoplay-btn .et_pb_video_box’);
if (videoBoxes.length !== 0) {
videoBoxes.forEach(function(videoBox) {
var video = videoBox.querySelector(‘video’);
if (video) {
video.muted = true;
video.loop = true;
video.setAttribute(‘playsInline’, ”);
video.play();
}
});
}
});

  • Make sure to replace your-video-module-class with the actual class name you set in your video module.

Step 5: Insert the JavaScript Code

  • Go back to the Divi Builder, and within the Video module, click the “Code” tab.

  • Paste the JavaScript code you copied in the previous step into the “Content” field.
  • Save and exit the module settings.

Step 6: Save and Publish

  • Save and publish your Divi page.
  • Exit the Visual Builder.

Step 7: Test the Autoplaying Video

  • When you load the published page, you’ll see that the video starts playing automatically.
  • It will also loop continuously, providing an engaging user experience.

Conclusion: You’ve successfully learned how to make a video autoplay when a page loads and loop continuously in Divi. This can be a valuable addition to your website, particularly if you want to grab your visitors’ attention with an eye-catching video. Enjoy enhancing your website’s user experience with this feature. If you found this tutorial helpful, please consider liking and sharing it.

Visited 3 times, 1 visit(s) today