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

Shopify Discussion

Topic summary

A Shopify user is trying to configure a video on their About Us page to autoplay with sound (unmuted) and loop continuously. They’re using custom liquid code that currently works visually on both desktop and mobile but includes the muted attribute.

Current Issue:

  • The video plays but is muted by default
  • Removing the muted attribute causes the video to display as a black screen
  • User has tried variations like “unmute” and “unmuted” without success

Proposed Solutions:

  • One respondent suggested removing the muted property and adding controls to allow users to manually unmute
  • Another user confirmed that simply removing muted worked for them
  • Important caveat: Most modern browsers block autoplay with sound by default to improve user experience and reduce data usage

Status:
The discussion remains unresolved. The user rejected the controls-based solution as a last resort, insisting on autoplay with unmuted audio, but browser limitations may prevent this from working as intended without user interaction.

Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
1

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:

<
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

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

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.

3

Someone else with more knowledge of code please help!

4

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

5

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.

6

Just remove the “muted” text, that’s worked for me:

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