Elementor comes as a simple yet powerful drag-and-drop WordPress page builder. It helps you effortlessly build and design your WordPress site with different types of content, media, and layout. Even though you have no coding or design skills, you still can create a beautiful website on your own.
That said, it’s reported to have some problems. Elementor self-hosted video not working is one of the most common troubles you may encounter when working with Elementor. Besides, Elementor video widget not working on mobile and Elementor background video sound not working also happens sometimes.
If you’re struggling with these errors, here you can find several possible solutions. Keep reading!
- Reasons for Elementor Self-Hosted Video Not Working
- Fix Autoplay Video Not Working in Elementor
- Troubleshoot Elementor Video Autoplay Not Working on Mobile
- Resolve Elementor Background Video Sound Not Working
- Bonus Tip: Protect Your Elementor Self-Hosted Videos
Reasons for Elementor Self-Hosted Video Not Working
Elementor allows your videos to play automatically after loading the page by enabling the Autoplay option. This function applies to any video source, from self-hosted videos to embedded videos from third-party platforms like YouTube.
However, when the error occurs, the autoplay feature will not work after your page is loaded. Autoplay video not working in Elementor is not a serious but annoying problem. To troubleshoot the issue, you first need to find out the culprits causing it.
Before you read further.... Free Download (PDF)
Secret Side Door
Secret Google Search Tactic That Will Skyrocket Your Sales, Connect You to the Perfect Partners, Influencers & Affiliates and Send Your Google Rankings Soaring! FREE when you sign up for Digital Creators Edge, a free newsletter for Digital Creators who wish to take their business to the next level.
If you turn on the Image Overlay option, it will generate a custom thumbnail for your video. The overlay image overrides the video autoplay option. That’s why your video can be auto-played.
Besides, some web browsers such as Google don’t allow autoplay video if the video is unmuted. Every browser has its own autoplay rules. So, you should read these policies to figure out whether autoplay is supported in certain browsers.
Fix Autoplay Video Not Working in Elementor
Follow the guide below to troubleshoot the Elementor self-hosted video not working problem:
#1 Disable Overlay Images
The first thing is you need to check whether the Image Overlay option is on. If yes, simply disable it.
- In the Edit with Elementor screen, navigate to the Content tab.
- Select Hide to turn off the Image Overlay option.
#2 Mute Your Videos
If the problem still persists, you should try to mute your video. Please bear in mind that you have to mute the video even though it doesn’t have sound or audio.
- In the Edit with Elementor screen, head over to the Content tab.
- Enable the Mute button under the Video Options menu.
#3 Use Elementor Addons
You can also use add-ons to solve the autoplay issue. There are many Elementor addons available on the market that offer video widgets with autoplay features. Here are some of the best ones.
Custom Carousel Auto Play
The Custom Carousel Auto Play extension lets you create a custom carousel with an unlimited number of slides. You can include any type of content in each slide and set it to play automatically. Also, it allows you to control the time between each slide change.
Video Widget for Elementor
Optimizing your videos has no longer been a complicated task with the Video Widget for Elementor addon. It enables you to embed videos into pages or posts with custom thumbnails, play buttons, and so on.
Ultimate Addons for Elementor
The Ultimate Addons for Elementor plugin provides you with an all-in-one solution for Elementor content optimization. Its video widget supports autoplay, thumbnails, loading time, play buttons, and more.
You’ve tried all the solutions above but the Elementor self-hosted video is still not working? Then it’s necessary to contact experts for help because chances are that conflicts happen somewhere on your site.
Troubleshoot Elementor Video Autoplay Not Working on Mobile
In case your autoplay videos work perfectly on desktop but not on mobile, here’s how to fix that.
- In the Edit with Elementor screen, go to the Content tab.
- After turning on the Autoplay option, the Play On Mobile button will show up. Simply activate the button.
Sometimes, your autoplay videos have operated well on mobile for a while then they suddenly don’t work anymore. The mobile video widget literally doesn’t show anything where the videos should be.
In other words, you can see your videos in the responsive editor for mobile. However, when you check the live site on your phone, there is no video appearing.
To solve the problem, you should try to purge all caches first. If it still doesn’t work, just disable the Autoplay option.
Resolve Elementor Background Video Sound Not Working
You can fix the Elementor background video sound malfunction by generating play and mute buttons. In this section, we’ll walk you through how to achieve that. But please note that this method can be applied only for self-hosted videos in Elementor. It won’t work for Youtube, Vimeo, or any other streaming platform videos.
Take the following steps to create a mute button for your Elementor self-hosted background video.
- Select the + icon in an empty section of the page and choose your desired section structure.
2. In the Advanced tab, type “herosection” to the CSS Classes section.
3. In the Style tab, choose the Video option from the Background Type attribute and paste your Video Link.
4. Navigate to the Elements menu and add the Icon widget to your page.
5. In the Content tab, open Icon Library.
6. Search for the Volume icon and press the Insert button.
7. In the Layout section, set the Content Width to Full Width, Height to Fit To Screen, and Column Position to Stretch. This helps you in positioning the icon.
8. Under the Advanced settings of your icon, select Absolute in the Position drop-down menu. Now, you can configure your icon’s position to your liking by modifying the Horizontal Orientation and Vertical Horizontal options.
The mute button you’ve created allows you to mute as well as unmute your videos. This helps you solve the Elementor background video sound not working issue.
Bonus Tip: Protect Your Elementor Self-Hosted Videos
The PDA Gold’s Protect WordPress Videos & Audios extension offers a simple solution to embed and protect your self-hosted videos. The add-on allows your premium users to view your videos online but stops them from downloading the videos.
It disables the Inspect Elements tool so you can prevent direct access to and share the video file URLs. In addition, the plugin helps you block most of the popular video downloaders including IDM.
Don’t Let Elementor Self-Hosted Video Not Working Bother You Anymore!
The Elementor self-hosted video not working error happens due to several reasons. It could be because you’ve turned on the overlay images or the sound of your videos.
Simply disable these options and you’ll be able to fix the issue. If the problem still exists, activating an Elementor add-on can be the last solution. With our guide, it’s time to let the annoying Elementor self-hosted video not working error not bother you anymore!
If you find our guide useful, don’t forget to subscribe to our website to get the latest updates.
