Vimeo embed api / unmute and mute not working - why? any workarounds?

[Tim B]

Hello :)

after some time I am back posting here with a video embed related question.

Why is it that this code does not work:

<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>
<button class="unmute-btn">Unmute Video</button>
<script src="https://player.vimeo.com/api/player.js"></script>
<script>
    const player = new Vimeo.Player(document.getElementById('vimeo-player'));

    const unmuteBtn = document.querySelector('.unmute-btn');
    unmuteBtn.addEventListener('click', function() {
        player.setMuted(false).then(function() {
            player.setVolume(1);
        }).catch(function(error) {
            console.error('Error unmuting video:', error);
        });
    });
</script>

In more detail: it is not possible to toggle mute or unmute on vimeo embeds. When using this code in brackets on a normal html it is working.

I would like to embed videos super clean on autoplay and then click on a simple text element that says "unmute". this should toggle the video to be unmuted and the text to be changed to "mute".

I already got some good code with codeium but somehow something within Laytheme seems to prevent this from working? Any ideas?

Would love to make this work.

cheers :)

[Tim B]

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>

[arminunruh]

2 things

i think the vimeo player.js library might already be included in lay theme, so dont include the <script> tag for it maybe:

<script src="https://player.vimeo.com/api/player.js"></script>

also instead of this:

document.addEventListener('DOMContentLoaded', function() {

use:

window.laytheme.on('newpageshown', function() {

})

for click events read this:
https://laytheme.com/documentation/custom-javascript.html#binding-click-events

also when you write javascript and things dont work, you need to debug it by using console.log

for example:

const unmuteBtn = document.querySelector('.unmute-btn');
console.log(unmuteBtn)

in your console you'd then maybe see oh that button couldn't be found

or after

unmuteBtn.addEventListener('click', function() {

you could write

console.log('hi')

and when you click, you'd see in your console: oh there is no "hi", so maybe the click event handler doesn't work or sth like this

[Tim B]

This post is deleted!