Vimeo autoplay muted video and unmute not working

Question

I have an embed VIMEO video with autoplay and muted options. I'm trying to make a custom feature to let users unmute my video through a custom button. It works fine but in Chrome (especially in Android), because it gives me this error:

Unmuting failed and the element was paused instead because the user didn't interact with the document before.

But if you read their documentation, it says this:

One cool way to engage users is about using muted autoplay and let them chose to unmute (see code snippet below). Some websites already do this effectively, including Facebook, Instagram, Twitter, and YouTube.

<video id="video" muted autoplay>
<button id="unmuteButton"></button>

<script>
   unmuteButton.addEventListener('click', function() {
   video.muted = false;
 });
</script>

So, what's the problem then? my code looks like:

var options = {
id: 316816937,
width: 990,
loop: true,
autoplay: true,
mute: true,
};

var player = new Vimeo.Player('embeddedVideo', options);

player.setVolume(0);

player.on('play', function() {
    console.log('played the video!');
});

$(".videoWrapper .cover").click(function () {
    $(this).addClass("close");


    player.ready().then(function () {
    player.setVolume(1);
});

});

So, my video is with autoplay+muted, and clicking on a custom layer I setVolume to 1. So I don't know why it gives me the error I said above.

Thank you!

Answer 1

I ran into this issue today. The solution that worked for me was to add the allow="autoplay" attribute to Vimeo's <iframe> tag, like so:

<iframe id="video" src="https://player.vimeo.com/video/<vimeoID>?background=1" width="640" height="360" style="border:0" allow="autoplay" allowFullScreen></iframe>

In order for unmute to work, it has to be triggered by the user. So I added an unmute button:

<span data-vimeo="unmute">Unmute</span>

Used the Vimeo player API:

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

And then in JavaScript, attached a click handler with jQuery:

$("[data-vimeo=unmute]").click(function() {
    var player = new Vimeo.Player($("#video")[0]);
    player.setMuted(false);
});