how to create an autoplay video with an unmute botton

[lepuffcases]

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 

[Small_Task_Help]

Hi,

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

HTML code example

<div class="video-container">
  <video id="autoplayVideo" class="video" autoplay muted playsinline>
    <source src="YOUR_VIDEO_URL" type="video/mp4">
    Your browser does not support the video tag.
  </video>
  <button id="unmuteButton" class="unmute-button">Unmute</button>
</div>

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';
    }
  });
});

[lepuffcases]

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?

<style>
.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 */
}
</style>

<div class="video-container">
<!-- Desktop Video -->
<video id="desktopVideo" class="video-element" controls muted playsinline>
<source src="https://cdn.shopify.com/videos/c/o/v/030b9a53d25845b08f948ca686411d90.mov" type="video/mp4">
Your browser does not support the video tag.
</video>

<!-- Mobile Video -->
<video id="mobileVideo" class="video-element" controls muted playsinline
poster="https://cdn.shopify.com/s/files/1/0000/0001/files/new_mobile_video_poster.jpg">
<source src="https://cdn.shopify.com/videos/c/o/v/3e1dcd60884342ba9236b0f676e322b1.mov" type="video/mp4">
Your browser does not support the video tag.
</video>

<!-- Mute/Unmute Button -->
<button class="mute-button" onclick="toggleMute()">Mute/Unmute</button>
</div>

<script>
function toggleMute() {
const desktopVideo = document.getElementById('desktopVideo');
const mobileVideo = document.getElementById('mobileVideo');

if (window.innerWidth >= 768) {
desktopVideo.muted = !desktopVideo.muted;
} else {
mobileVideo.muted = !mobileVideo.muted;
}
}

function setVideo() {
const desktopVideo = document.getElementById('desktopVideo');
const mobileVideo = document.getElementById('mobileVideo');

if (window.innerWidth >= 768) {
desktopVideo.style.display = 'block';
mobileVideo.style.display = 'none';
} else {
desktopVideo.style.display = 'none';
mobileVideo.style.display = 'block';
}
}

// Set the correct video on page load and window resize
window.addEventListener('load', setVideo);
window.addEventListener('resize', setVideo);
</script>

[Codefoxer]

<div class="video-container">
<video class="img-fluid w-100" autoplay loop playsinline muted crossorigin="anonymous" id="bgVideo">
<source src="https://cdn.shopify.com/videos/c/vp/db0c1c9f50c242b5b077ce7a90cdf8ea/db0c1c9f50c242b5b077ce7a90cdf8e...">
<track label="English" kind="captions" srclang="en" src="https://cdn.shopify.com/s/files/1/0549/1854/5574/files/School_Zone_60_sec_Brand.vtt?v=1681761453"></track>
</video>
<button id="mutebtn">Unmute</button>
</div>

<style>
.video-container {
position: relative;
}

#mutebtn {
position: absolute;
right: 20px;
top: 20px;
/* Additional styling*/
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
var video = document.getElementById('bgVideo');
var mutebtn = document.getElementById('mutebtn');

mutebtn.addEventListener('click', function() {
if (video.muted) {
video.muted = false;
mutebtn.textContent = 'Mute';
} else {
video.muted = true;
mutebtn.textContent = 'Unmute';
}
});
});
</script>

[lepuffcases]

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?

<style>
.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 */
}
</style>

<div class="video-container">
<!-- Desktop Video -->
<video id="desktopVideo" class="video-element" controls muted playsinline>
<source src="https://cdn.shopify.com/videos/c/o/v/030b9a53d25845b08f948ca686411d90.mov" type="video/mp4">
Your browser does not support the video tag.
</video>

<!-- Mobile Video -->
<video id="mobileVideo" class="video-element" controls muted playsinline
poster="https://cdn.shopify.com/s/files/1/0000/0001/files/new_mobile_video_poster.jpg">
<source src="https://cdn.shopify.com/videos/c/o/v/3e1dcd60884342ba9236b0f676e322b1.mov" type="video/mp4">
Your browser does not support the video tag.
</video>

<!-- Mute/Unmute Button -->
<button class="mute-button" onclick="toggleMute()">Mute/Unmute</button>
</div>

<script>
function toggleMute() {
const desktopVideo = document.getElementById('desktopVideo');
const mobileVideo = document.getElementById('mobileVideo');

if (window.innerWidth >= 768) {
desktopVideo.muted = !desktopVideo.muted;
} else {
mobileVideo.muted = !mobileVideo.muted;
}
}

function setVideo() {
const desktopVideo = document.getElementById('desktopVideo');
const mobileVideo = document.getElementById('mobileVideo');

if (window.innerWidth >= 768) {
desktopVideo.style.display = 'block';
mobileVideo.style.display = 'none';
} else {
desktopVideo.style.display = 'none';
mobileVideo.style.display = 'block';
}
}

// Set the correct video on page load and window resize
window.addEventListener('load', setVideo);
window.addEventListener('resize', setVideo);
</script>