How to remove video controls and add mute button on Refresh theme

Store Design
, ,
1

Hey guys hope you are having a good day
so i got this video section on my refresh themed store
and i want it to not have any play button (like in the picture) or a video time line.
i just want it to loop infinitely, is that possible?
also another thing, i want to have a audio button that will mute the video when it loads
the video should load while muted and only play sound if they press the button.
thank you in advance!
store link: https://breshofficial.com/

image
image1231×499 41.1 KB

image
image1907×808 31.4 KB

2 Likes
2

Hi @Bresh_store

This youtube video tutorial will help you add an autoplay video to your store.

Thanks!

3

Yes, it’s possible — set your video to autoplay, muted, and loop in the code (e.g., <video autoplay muted loop>).
Then add a simple JS toggle button to control sound (video.muted = !video.muted).
Hide controls with controls="false" or CSS. @Bresh_store

4

Hi @Bresh_store

Try this code.

<style>
.video-section {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
}

.video-section video {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

/* Mute/unmute button */
.mute-toggle {
  position: absolute;
  bottom: 15px;
  right: 15px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 45px;
  height: 45px;
  cursor: pointer;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: background 0.3s ease;
}
.mute-toggle:hover {
  background: rgba(0, 0, 0, 0.7);
}
</style>

<div class="video-section">
  <video id="hero-video" autoplay loop muted playsinline>
    <source src="https://cdn.shopify.com/videos/c/o/v/3d841257bf82426ca5f98ddef4823170.mp4" type="video/mp4">
    Your browser does not support the video tag.
  </video>
  <button class="mute-toggle" id="mute-toggle" aria-label="Toggle sound">🔇</button>
</div>

<script>
document.addEventListener("DOMContentLoaded", function() {
  const video = document.getElementById('hero-video');
  const button = document.getElementById('mute-toggle');

  button.addEventListener('click', function() {
    if (video.muted) {
      video.muted = false;
      button.textContent = '🔊';
    } else {
      video.muted = true;
      button.textContent = '🔇';
    }
  });
});
</script>
1 Like
6

Where should i put it?

1 Like
7

leave the chat gpt alone bro

8

I will show you how to go about it, and also have a great opportunity on how to make your first sales :smiling_face:.

9

Hi @Bresh_store

You need to edit the section that has been added using Custom Liquid in the Customize area. If you’re unable to do it, let me know — I’ll do it for you.

Best regards,
Devcoder :laptop:

1 Like