The video is not autoplaying on my phone. Unfortunately, this is a very common issue. Mobile browsers (and even phone manufacturers) simply do not like autoplaying videos, even when muted. It has to do with the resources that videos draw (big battery drainers) and they consider them disruptive to the user experiences. I have a client whose website has a full video background for his home page, and it won’t autoplay on my phone, and I have it set to autoplay and mute as well. It’s something I will look have to look into further, because I’d like to find a solution to this as well.
It’s frustrating that as web developers, we cannot deliver to our clients the experience they want their clients to have when visiting their websites, but this is the nature of the internet right now. I’m sure that as time goes on, technology improves, batteries become more powerful, phone become more efficient, and bandwidth becomes less of an issue, there will be changes to these policies, but right now there are no guaranteed work-arounds I’m aware of.
On a separate note, I get a strange font substitution on your website on my phone. I see that you’re using a Google font named “Alike” The font loads correctly on my desktop computer in both Firefox and Chrome (running Windows 7x64), but on my Android phone (running Android 11) it is being substituted in both Chrome and Firefox with some odd font I don’t recognize. I’ve attached a screenshot below. I see that you’re using inline CSS styling to set the font. This might be causing the issue.
When looking at the page with F12 developer tools, I can see that there are
<p> elements using the font Alike, and there are
</br> elements in the same paragraph using the font Raleway. I don’t think this has anything to do with your video issue, but it’s definitely not good practice having mixed fonts like that in the same paragraph.
Nor should you be using inline CSS styling in general. It’s really a poor way to create your website. You should put all your styles in a separate CSS file.