There’s nothing more frustrating than finding out a feature on your website doesn’t work on the mobile version. And when it comes to Elementor, “why is video not playing on mobile?” is a common head-scratcher that I’ve found myself searching for from time to time! And the most annoying thing about it is I didn’t find a decent guide to help me troubleshoot this issue.
So I’ve decided to write this blog post for anyone out there who is struggling to figure out why video isn’t playing on their mobile website built on Elementor. Trust me, the solution is so simple you’re going to kick yourself for not noticing it sooner!
As you’re here, I’m going to assume you’re already familiar with the WordPress website platform and that your website is likely built on it. Similarly, you’ve probably got the Elementor page builder plugin installed already.
Before we kick things off, if you’re new to your WordPress & Elementor website, here’s something awesome I think will help you through every step of your website-building journey.
The WordPress Hive: Your DIY WordPress & Elementor Course
The WordPress Hive is a step-by-step framework to teach you how to use WordPress and Elementor to create a shit hot website for your business or personal brand. We cover all the Elementor tools (including Elementor Pro) to give you a comprehensive understanding of what you can do with these tools and how to best use them for your website design goals. If that sounds like exactly what you’re looking for then click here to learn more about accessing the course.
In this blog post I promised you we’d get to the bottom of your issues with Elementor, specifically, why is video not playing on mobile. So let’s dive in!
Elementor: Why Is Video Not Playing On Mobile?
That title almost reads like we’re asking Elementor ourselves why the damn video won’t play on mobile, which we could do, but on a quick Google search, I couldn’t find anything from Elementor themselves on how to resolve this issue. So we move… or we write the tutorial myself – in my case!
As I said, the solution for this is so simple you’re going to kick yourself for not noticing.
There are two different ways to play videos on your Elementor website:
- Background videos
- Video widget
Both of these have the option for the video to play on mobile however background videos in particular won’t play on mobile by default. So we’ve got to make sure we have the correct settings to make this work.
How To Make Elementor Background Videos Play On Mobile
First of all, I’m going to need you to open your WordPress page by clicking “Edit with Elementor”.
Once you’ve done that, you’ll see your page opened up in the Elementor editor, like so:
Next, navigate to the section you’ve applied your background video to, ensuring that the left panel has changed to show the edit section settings rather than a widget within it or the main Elementor editor left panel (where you can select widgets). Once you’ve selected the correct container, it should look like this:
Have you noticed it yet?
About halfway down the panel, you’ll see the option to “Play on Mobile” and this needs to be toggled on for your video to play on mobile. So make sure you switch that on and click save.
When you refresh your page on mobile, your video should now play on mobile.
How To Make Elementor Video Widgets Play On Mobile
I won’t walk you through all the steps above again, just make sure you click on the video widget on your page so the panel on the left changes to the widget settings, rather than the section mentioned above.
You need to ensure here that “Player Controls” is switched on (as shown in the above screenshot) so that the mobile user can play the video.
Unfortunately, the “Autoplay” setting does not work on some web browsers on mobile devices, such as Google Chrome, so you can’t force the video to autoplay as you can with background videos. However, by having “Player Controls” switched on in the Elementor widget, you can ensure that the mobile user can easily play your video if they want to.
Conclusion: Why Is Video Not Playing On Mobile On My Elementor Website?
As you can see, there are two different ways to incorporate video on your Elementor website so your solution will vary depending on which option you’ve gone for. Either way, it is possible to have a video on the mobile version of your Elementor website and hopefully this tutorial has helped you figure out the necessary steps to do so!
