This article is about making HTML5 video start automatically on mobile, which is not as easy and straightforward as it might seem at first glance.
I originally came up with this blog idea because I was trying to create a video background for the hero section on a client’s website and realized that the mobile version was lacking without some extra work. Before we get into the solution, let’s look at the video tag itself.
The HTML5 Video Tag
The HTML5 video tag can be used to embed a video file on a website. It also comes with an autoplay attribute. You don’t have to set it to true to get the video to autoplay whenever someone loads the page the video is embedded on, you just have to have the attribute present in the tag. However, this only works by default on desktop, since browsers want to maximize the user experience for your site visitors, which makes sense.
Autoplay on Desktop Only (Default)
To make it autoplay on desktop only, you could do something like this:
<video autoplay> <source src="/wp-content/uploads/videos/video_name.mp4" type="video/mp4"> <source src="/wp-content/uploads/videos/video_name.webm" type="video/webm"> <source src="/wp-content/uploads/videos/video_name.ogv" type="video/ogv"> </video>
If you want to make the video loop, you need to add the loop attribute within the video tag. After trying to get this to work, and having our company’s part-time, contract web developer tell me that video can’t autoplay on mobile, and recommending that we just swap it out with a still image, I decided to do some research.
Initially, I read somewhere (maybe back in college?) that the browsers don’t like video autoplaying on mobile because of the strong possibility for audio to interrupt a quiet environment without the user’s input. This could indeed be very frustrating, so I tried adding the muted attribute to the video tag.
In my browser’s emulator, this seemed to work. However, when I tried it on my iPhone, it still wouldn’t autoplay.
Getting Autoplay to Work on Mobile
After some more researching, I read a Stack Overflow post about the autoplaying video on mobile devices and found out that it needed one more attribute. It’s the playsinline attribute that makes HTML5 video autoplay on mobile (along with the previously mentioned ones). You can see the proper solution below:
<video autoplay loop muted playsinline> <source src="/wp-content/uploads/videos/video_name.mp4" type="video/mp4"> <source src="/wp-content/uploads/videos/video_name.webm" type="video/webm"> <source src="/wp-content/uploads/videos/video_name.ogv" type="video/ogg"> </video>
Thanks for reading through this article and I hope it helped you solve a very specific problem, namely, that HTML5 video doesn’t autoplay by default on mobile with only the autoplay and muted attributes, but only with the playsinline attribute included.
Please feel free to send me a message if you have questions or want to share feedback or a different solution you found. Thanks again 👍🏻