Hi,
Can anyone help with the video autoplay? Autoplay works but you have to hit the audio button for sound. I want both at the same time. I’m using the Video Responsive Youtube component. I read that Google had something to do with this. I don’t mind myself, but this is not my decision.
Thank you
Randy
Virtually all browsers mute the audio in autoplaying videos by default. It’s considered the “preferred user experience” now. There were some workarounds a couple of years ago, but the browser makers have more or less locked this down now. They simply determined that the majority of people don’t want to be bombarded with sound when they open a website.
You can modify settings (at least on desktops) in the browsers to allow autoplay audio to play, but this has to be done at the user level, and probably 99% of people wouldn’t even understand how to do this even if you had written instructions on your website.
Hi,
Thank you for your input. Pretty much what I have read about this feature. To me I don’t have a problem with it. I think it’s best just to let people hit play. I can’t seam to get the video to autoplay on the phone. I thought I had it working once. Works on tablet, both Galaxy devices. Any ideas? Appreciate it. Thanks.
Do you have a link so I can see if it plays on my phone? It could be your phone settings, video settings, browser settings… just guessing without seeing the site.
Hi,
Sorry, that might have been a good idea. Lol…I have to wait a few hours because the site has been moved. Will send when active.
Randy
Hi,
Here’s the link to see if it autoplays on your phone.
https://www.brockgetsitsold.com/
Thank you
Randy
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.
Update: I did a test and I was able to get a background video to autoplay on my phone in the Chrome browser by hosting the video on my server, using a custom code block with the following code:
<video width="1920" height="1080"
autoplay loop muted preload="auto">
<source src="https://thelightwavegroup.com/vid/aquarium.mp4" type="video/mp4">
</video>
So it might be possible for you to do it with your video if you use this method. You would want to add the control attribute to your code, so people can hit the unmute button to get sound.
Unfortunately, it did not work in mobile Firefox. I have no way to test Safari or Edge, because I don’t have either browser installed.
Hi,
Having a hard time convincing him that it is just the way videos are right now. It auto plays on everything but the phone. To me it’s not a big issue. I personally don’t like auto play. I will look at the font I didn’t realize it was like that. Thank you for the assistance.
Well you might be able to get it to autoplay without sound if you put the video on the page using custom code like I showed above. FYI, I did find that Firefox mobile will autoplay muted videos, but only IF you first allow it through a setting in the browser menu. By default, it will not autoplay even muted vids. But apparently Chrome will, and Chrome is still the most popular web browser globally (63% vs 24% for Safari.) As I said, I have no way to check autoplay in Safari, or in Edge for desktop.
I can appreciate your client’s frustration, but it’s not your fault that the browser companies have taken web development out of the hands of web developers. It’s frustrating and obnoxious, but what can we do? I simply explain to my clients that there are some things I simply have no control over when it comes to the UX of their websites. It depends on the visitors device and browser. All we can do is try to make the majority of things work for the majority of people and clients.
You are absolutely right, we can only do so much. When it comes to search engines it’s their way or no way. Especially Google, they are God, when God speaks we better listen. Lol. We are all in the same boat. Thanks for the feedback at least I know there’s nothing I can do about it at the moment.
Stay safe!