This is the rough code that works and that I tested with brackets:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vimeo Video with Unmute Button</title>
<style>
.unmute-btn {
cursor: pointer;
color: blue;
text-decoration: underline;
}
.muted {
color: red;
}
</style>
</head>
<body>
<div style="padding:61.86% 0 0 0;position:relative;">
<iframe id="vimeo-player" src="https://player.vimeo.com/video/926876420?autoplay=1&muted=1&badge=0&autopause=0&player_id=0&app_id=58479&controls=0" frameborder="0" allow="autoplay; fullscreen; picture-in-picture; clipboard-write" style="position:absolute;top:0;left:0;width:100%;height:100%;" title="ON — OBSERVING THE SENSATION OF MOVEMENT"></iframe>
</div>
<div class="unmute-btn">Unmute</div>
<script src="https://player.vimeo.com/api/player.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
const player = new Vimeo.Player(document.getElementById('vimeo-player'));
const unmuteBtn = document.querySelector('.unmute-btn');
let isMuted = true;
unmuteBtn.addEventListener('click', function() {
if (isMuted) {
player.setMuted(false);
unmuteBtn.textContent = 'Mute';
unmuteBtn.classList.add('muted');
} else {
player.setMuted(true);
unmuteBtn.textContent = 'Unmute';
unmuteBtn.classList.remove('muted');
}
isMuted = !isMuted;
});
});
</script>
</body>
</html>
