How can I code a looping, unmuted auto-play video?

Shopify Discussion
1

*Repost because there is no solution yet. Deleting “mute” code does not work, changing it to “unmute or unmuted” doesn’t work. Give e the right code that works for my needs please!! Someone with code knowledge!! Can somebody please help me get my video to auto play unmuted and looped. How can I get the video to play with audio automatically without someone needing to toggle on? If this isn’t possible I will be surprise, but if it isn’t please suggest the solution to have controls to unmute it then. But that is last resort. I want this to autopay, looped, unmuted. Please try to use the code below if possible, it is the only one that is showing visuals for desktop and mobile versions for me.

Here is the code I am using for custom liquid on my about us page on the online store that works with desktop and mobile as far as the visuals showing up:

<
video {
width: 100%;
height: auto;
display: block;
margin: 0 auto;
}

Here is the link to my website where the video isn’t playing with audio: https://thewebwizardz.com/pages/about-us

2

Hey @Bradley21 ,

This is a browser violation. Technically, the only way to remove the “muted” property and have the video autoplay is only if:

  1. The user has interacted with the website (click, tap, etc.)

  2. On desktop, the user’s Media Engagement Index threshold has been crossed, meaning the user has previously played video with sound.

There’s a few more you can read here: https://developer.chrome.com/blog/autoplay

Also, if by any chance you are about to say “I’ve seen some sites do it”, Google also reviews sites so that some sites are allowed to have it if google deems it to be safe. These safety features are added because you don’t want someone going into a site in public with their volume full and have an adult video play out for the entire public to hear. (Example)

Even if you do manage to get on Google’s good side, unmuted autoplay will only be allowed on desktop. Mobile is always disabled by the browser.

You should enable controls on the video so that the user can unmute the video.

Code: (Added ‘controls’ attribute)

There are hacks that I used to do years ago, I am not sure if they work now, but when you index your site and google finds out, you’ll be heavily penalised and you’ll have to start your business all over again with a new domain. Don’t try it, not worth it.

1 Like
3

You have the level of communication I was looking for, thank you so much honestly! God Bless!