I am adding HTML5 video to my website without controls visible but want a custom mute button.
On another post, a community member provided a code snippet that would potentially resolve the issue. However, I can’t get it to work and the community member hasn’t responded to additional clarification - so I’m reposting again to see if anyone else can help.
Snippet below. I’ve added the relevant ID attributes to the video and the button. Is there something else that I’m missing?
<video id="myVideo" width="100%" height="100%" onclick="this.paused ? this.play() : this.pause();">
<source src="//fac1c99cc7c9be66bfa1e3d4110198e7.cdn.bubble.io/f17230" type="video/mp4">
</video>
<button id="muteButton" onclick="toggleMute()">Mute</button>
<script>
function toggleMute() {
var video = document.getElementById('myVideo');
var button = document.getElementById('muteButton');
video.muted = !video.muted;
button.textContent = video.muted ? 'Unmute' : 'Mute';
}
</script>
The code that was provided worked when the iFrame option was checked in the HTML element, but wasn’t showing up the mute button. I’ve defined a separate event handler for the mute/unmute option and this should work for you now.
thank you so much. i really appreciate the help. i assume that i can substitute the button for an img (icon) instead, so will try that. i’m not a coder, so if it’s not a huge inconvenience for you provide that edit, you’ll probably save me a ton of time. hopefully other people can benefit from this too. happy to buy you a coffee!
