how to create an autoplay video with an unmute botton

Shopify Discussion
1

how to create an autoplay video with an unmute botton? I have a audio video below in my homepage but the sound doesn’t work.

my store: lepuffcases.nl

2

Hi,

After uploading video use HTML,Javascript and CSS for reach your goal (at index.liquid or homepage.liquid)

HTML code example

Javascript code example

document.addEventListener('DOMContentLoaded', function() {
  var video = document.getElementById('autoplayVideo');
  var unmuteButton = document.getElementById('unmuteButton');

  unmuteButton.addEventListener('click', function() {
    if (video.muted) {
      video.muted = false;
      unmuteButton.textContent = 'Mute';
    } else {
      video.muted = true;
      unmuteButton.textContent = 'Unmute';
    }
  });
});
3
Unmute
.video-container { position: relative; } #mutebtn { position: absolute; right: 20px; top: 20px; /* Additional styling*/ }
4

It is not working.

I have a liquid code and its working. The only thing that is not working is the cover image/ 1e screen on mobile device. Any good ideas?

.video-container { position: relative; width: 100%; min-height: 300px; /* Ensure container is tall enough */ background-color: #000; /* Fallback color to ensure visibility */ } /* Hide videos by default */ .video-element { display: none; width: 100%; height: auto; } /* Show desktop video on screens wider than 768px */ @media (min-width: 768px) { #desktopVideo { display: block; } } /* Show mobile video on screens smaller than 768px */ @media (max-width: 767px) { #mobileVideo { display: block; } } .mute-button { position: absolute; bottom: 20px; right: 20px; background-color: rgba(0, 0, 0, 0.5); color: white; padding: 10px; border: none; cursor: pointer; z-index: 10; } /* Ensure the video container does not collapse */ #mobileVideo { width: 100%; height: auto; display: block; /* Ensure video element is visible */ }

Your browser does not support the video tag.

Mute/Unmute

5

It is not working. I have a liquid code and its working. The only thing that is not working is the cover image/ 1e screen on mobile device. Any good ideas?

.video-container { position: relative; width: 100%; min-height: 300px; /* Ensure container is tall enough */ background-color: #000; /* Fallback color to ensure visibility */ } /* Hide videos by default */ .video-element { display: none; width: 100%; height: auto; } /* Show desktop video on screens wider than 768px */ @media (min-width: 768px) { #desktopVideo { display: block; } } /* Show mobile video on screens smaller than 768px */ @media (max-width: 767px) { #mobileVideo { display: block; } } .mute-button { position: absolute; bottom: 20px; right: 20px; background-color: rgba(0, 0, 0, 0.5); color: white; padding: 10px; border: none; cursor: pointer; z-index: 10; } /* Ensure the video container does not collapse */ #mobileVideo { width: 100%; height: auto; display: block; /* Ensure video element is visible */ }

Your browser does not support the video tag.

Mute/Unmute