There are a few reasons why videos may not autoplay on mobile devices, even if they are set to autoplay and are muted.
In Elementor, background videos will be set to autoplay and muted if the option "Play On Mobile" is selected in the UI.
The normal Elementor video element should also autoplay if it's set to autoplay and muted, except in the scenarios outlined below.
In HTML, videos are expected to autoplay if they have the attributes autoplay="autoplay" and muted, except in the scenarios outlined below.
<video loop="true" autoplay="autoplay" controls muted> <source src="http://www.tuscorlloyds.com/CorporateVideo.mp4" type="video/mp4" /> </video>
Why do videos don't always autoplay on mobile devices?
There are a few reasons, let's look at the most common ones:
Power-saving modes
Power-saving modes on mobile devices can impact the autoplay behavior of videos. When a device is in power-saving mode, it may limit the resources available to background processes, including the playback of video. As a result, a video that is set to autoplay may not play when the device is in power-saving mode.
You can easily test this yourself by visiting your page with a video after enabling power saving mode on your device.
Data usage concerns
Autoplaying videos can use up a lot of data, especially if the user is on a limited data plan. Some mobile devices and browsers may block autoplay to prevent excessive data usage.
User experience
Autoplaying videos can be disruptive to the user experience, especially if the user is not expecting the video to start playing. As a result, some mobile devices and browsers may block autoplay to improve the user experience.
Browser settings
Some mobile browsers have settings that allow users to disable autoplay for videos. If autoplay is disabled in the browser settings, the video will not play automatically.
Hardware and software limitations
In more rare cases, hardware or software limitations on the mobile device may prevent videos from autoplay. For example, some older devices may not have the hardware or software capabilities to support autoplay.
Solutions to make videos autoplay on mobile
There really is no proper "solution" to this. If you want a video to autoplay 100% of the time on mobile, you won't be able to.
Still, there are a few things to consider.
Using GIFs instead
If your video is really short, you can consider replacing it by a GIF that's properly scaled and compressed just for mobile phones. As long as it's under 1mb, and ideally not above the fold (ie part of the hero), you should be fine. Extra points if it's lazy loading.
Adding a play button
You may want to provide controls that allow users to manually start the video playback. Just having the default player controls in place will allow users to enable playback, as long as the play button can be clicked. If your video was set as background, this might not be the case.
Adding a enter site button
A bit more involved than the previous two solutions, this will require some custom JavaScript that will enable the playback of the video after the user has clicked a "enter website" overlay button. This works because for the most part, video playback is blocked, unless the user specifically asks for it by interacting witht hte page. Here we essentially pretend that our "enter site" button is a remote control for our video.
Conclusion
Overall, there are many factors that can impact whether or not a video will autoplay on a mobile device, and it is difficult to predict exactly how a particular video will behave on a given device.
If you need your video to be seen by all visitors, you will want to consider one of the solutions proposed in this tutorial.
Otherwise, be resigned with the fact that modern devices and browsers simply don't allow all videos to autoplay all the time, on mobile. At least, now you understand it all!