How can I set a video to autoplay, loop, and unmute on my website?

Bradley21
Tourist
11 0 0

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 autoplay, 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:

<<style>
video {
width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
</style>
<video autoplay playsinline loop muted>
<source src="" type="video/mp4">
</video>

 

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

Replies 4 (4)

elevateagentur
Shopify Partner
18 5 3

Thanks for the code and there I see the muted property, which means the sound is muted by default. To play sound in your video, try removing the muted property. 

 

Also note that autoplay of videos with sound may be limited on some browsers and devices, and autoplay with sound is blocked, as mentioned above, to improve the user experience and reduce data usage for users with limited data plans.

 

In such cases, the user may first interact with the page or adjust the autoplay settings in their browser before the sound is played.

 

A good practice is to add Controls to the video so that users can control playback, including audio. You can do this by adding the controls property to the <video> tag:

 

<video autoplay playsinline loop controls>
<source src="" type="video/mp4">
</video>

By adding controls, you allow users to pause the video, adjust the volume, or enable full-screen mode, providing a better user experience and improving the accessibility of your website. That and the UX is not always something that most shop owners find particularly important.

Was I Helpful?

Buy me a coffee



For professional help contact: elevateagency@consultant.com
SweetStreetScen
Tourist
7 0 1

I of course already tried that. Need a better solution, thanks.

SweetStreetScen
Tourist
7 0 1

I am pretty straightforward with how I worded that, not wanting the controls and just for it to be unmuted. I tried “unmute” “unmuted” and I tried removing it all together, all of these things just makes the video go black.

SweetStreetScen
Tourist
7 0 1

Someone else with more knowledge of code please help!