Divi autoplay video
3 Ways to Autoplay Video in Divi Without Plugins | Divi Video Autoplay Guide
Adding autoplay videos in Divi can create a dynamic and engaging experience for your visitors. Let’s explore three effective ways to make this happen—without the need for plugins. Choose the approach that best suits your design and functionality needs.
Method 01:
Autoplay Video with Controls on Hover
In this method, your video will autoplay but only display controls (like play, pause, and volume) when users hover over it. Perfect for instances where you want a sleek, minimalistic video experience.
Steps to Implement:
Steps to Implement:
- Go to Divi » Theme Options » Integration and paste the following code in the field labeled “Add code to the ”:
- Next, navigate to the page or post where you want the autoplay video and enable the Divi Visual Builder.
- Insert a Video Module and delete the default YouTube video.
- Add your video from the WordPress Media Library (formats like MP4 and MOV work best).
- Go to Advanced » CSS ID & Classes in the Video Module and set the CSS Class to dm-autoplay-btn.
- Save changes and preview your page to confirm the video autoplays with controls visible on hover. (Note: Autoplay works only on the frontend, not in the Visual Builder.)
Pro Tip: If you want this functionality only on specific pages, add the code in a Divi Code Module on those pages instead of globally.
Method 02:
Autoplay with Unmute on Click
IThis method starts the video in autoplay mode, but the sound remains off. When users click anywhere on the video, it will unmute, allowing them to listen to the audio seamlessly.
Steps to Implement:
- Go to Divi » Theme Options » Integration and paste this code in thefield:
- In the Visual Builder, add a Video Module to your desired section.
- Choose or upload your video from the Media Library.
- Under Advanced » CSS ID & Classes, set the CSS Class to dividaddys-autoplay-click.
- Save and preview to test the unmute-on-click feature. If the video doesn’t autoplay, clear your browser and site caches.
Pro Tip: If you want this functionality only on specific pages, add the code in a Divi Code Module on those pages instead of globally.
Method 03:
HTML5 Video Embed (Direct Code)
This approach allows for a simple HTML5 embed, ideal if your video is self-hosted and you want maximum control over its behavior.
Steps to Implement:
- Add a Code Module in the desired Divi section.
- Customize the attribute with the URL of your video.
Explanation of Attributes:
- autoplay: Starts the video automatically.
- muted: Mutes the video to allow autoplay across more browsers.
- loop: Ensures the video replays after finishing.
- playsinline: Prevents full-screen playback on mobile devices.
- controls: Displays control options for users to interact with.
Each of these methods provides a unique way to enhance your Divi site with autoplay videos. Here’s a quick recap:
- Hover Controls (Method 1): Best for videos where user interaction is limited to hover.
- Unmute on Click (Method 2): Perfect if you want to give visitors control over sound.
- HTML5 Embed (Method 3): Great for custom setups with full control over attributes.
Happy designing! 🖌️✨
0 Comments