Why doesn't my mute/unmute button work in custom script?

z85510
Visitor
1 0 0

Hi, I want to run a script when I click on a button

 

<div style="position: relative;">
<div class="video-background {{ section_height }}" data-overflow-background {{ image_height_styles }}>
<video
{% if section.settings.image != blank %}poster="{{ section.settings.image }}"{% endif %}
id="{{ section.id }}-video-background"
data-video-type="native"
data-video-id="{{ section.id }}-video-background"
playsinline
autoplay
loop
muted
width="320"
height="240">
<source src="{{ section.settings.video_link_bg }}" type="video/mp4" />
</video>
</div>

<button id="muteButton" style="position: absolute; bottom: 3.5em; right: 1em; background-color: transparent; border: none; color: #fff;" onclick="toggleMute()">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" x="0" y="0" viewBox="0 0 24 24" style="enable-background:new 0 0 512 512" xml:space="preserve" class="">
<g>
<path fill="#ffffff" fill-rule="evenodd"
d="M16.25 6.003c0-1.03-1.176-1.618-2-1l-3.084 2.313a.75.75 0 0 1-.9-1.2l3.084-2.313c1.812-1.358 4.4-.066 4.4 2.2V13a.75.75 0 1 1-1.5 0zM3.47 3.47a.75.75 0 0 1 1.06 0l16 16a.75.75 0 0 1-1.06 1.06l-1.812-1.812c-.477 1.8-2.698 2.685-4.308 1.478l-4.267-3.198a1.25 1.25 0 0 0-.75-.25H6a2.75 2.75 0 0 1-2.75-2.75v-3.997A2.75 2.75 0 0 1 6 7.25h.191L3.47 4.532a.75.75 0 0 1 0-1.061zM7.69 8.752H6c-.69 0-1.25.56-1.25 1.249v3.998c0 .69.56 1.249 1.25 1.249h2.334a2.75 2.75 0 0 1 1.65.55l4.266 3.198c.824.618 2 .03 2-.999v-.686z" clip-rule="evenodd" opacity="1" data-original="#000000" class=""></path>
</g>
</svg>
</button>
</div>


<script>
var video = document.getElementById("{{ section.id }}-video-background");
var muteButton = document.getElementById('muteButton');

function toggleMute() {
video.muted = !video.muted;
muteButton.innerHTML = video.muted ? getMuteIcon() : getUnmuteIcon();
}

function getMuteIcon() {
return '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" x="0" y="0" viewBox="0 0 24 24" style="enable-background:new 0 0 512 512" xml:space="preserve" class=""><g><path fill="#ffffff" fill-rule="evenodd" d="M16.25 6.003c0-1.03-1.176-1.618-2-1l-3.084 2.313a.75.75 0 0 1-.9-1.2l3.084-2.313c1.812-1.358 4.4-.066 4.4 2.2V13a.75.75 0 1 1-1.5 0zM3.47 3.47a.75.75 0 0 1 1.06 0l16 16a.75.75 0 0 1-1.06 1.06l-1.812-1.812c-.477 1.8-2.698 2.685-4.308 1.478l-4.267-3.198a1.25 1.25 0 0 0-.75-.25H6a2.75 2.75 0 0 1-2.75-2.75v-3.997A2.75 2.75 0 0 1 6 7.25h.191L3.47 4.532a.75.75 0 0 1 0-1.061zM7.69 8.752H6c-.69 0-1.25.56-1.25 1.249v3.998c0 .69.56 1.249 1.25 1.249h2.334a2.75 2.75 0 0 1 1.65.55l4.266 3.198c.824.618 2 .03 2-.999v-.686z" clip-rule="evenodd" opacity="1" data-original="#000000" class=""></path></g></svg>';
}

function getUnmuteIcon() {
return '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" x="0" y="0" viewBox="0 0 24 24" style="enable-background:new 0 0 512 512" xml:space="preserve" class=""><g><path fill="#ffffff" fill-rule="evenodd" d="M14.25 6.003c0-1.03-1.176-1.618-2-1L7.983 8.202a2.75 2.75 0 0 1-1.65.55H4c-.69 0-1.25.56-1.25 1.249v3.998c0 .69.56 1.249 1.25 1.249h2.334a2.75 2.75 0 0 1 1.65.55l4.266 3.198c.824.618 2 .03 2-.999zm-2.9-2.2c1.812-1.359 4.4-.066 4.4 2.2v11.994c0 2.266-2.587 3.558-4.4 2.2l-4.267-3.2a1.25 1.25 0 0 0-.75-.249H4a2.75 2.75 0 0 1-2.75-2.75v-3.997A2.75 2.75 0 0 1 6 7.25h2.334c.27 0 .533-.087.75-.25zm5.915 3.148a.75.75 0 0 1 .884-.586 5.752 5.752 0 0 1 0 11.27.75.75 0 0 1-.298-1.47 4.252 4.252 0 0 0 0-8.33.75.75 0 0 1-.586-.884zm.086 2.94a.75.75 0 0 1 1.025-.273 2.75 2.75 0 0 1 0 4.764.75.75 0 1 1-.752-1.299 1.25 1.25 0 0 0 0-2.166.75.75 0 0 1-.273-1.025z" clip-rule="evenodd" opacity="1" data-original="#000000" class=""></path></g></svg>';
}
</script>

 

It doesn't do anything when I click on mute/unmute icon. what's wrong with this code?

Replies 0 (0)