How to Add a Custom Unmute Button Overlay to an Auto-Playing Vimeo Video

I had a request from a client who saw this on a competitor’s site. Basically, they had an auto-playing video that was muted, with a big unmute button in the center, like this:

I wasn’t sure how to do it at first, but I figured it out. The code is in this article!

4/28/2023 UPDATE

I just noticed this isn’t working in the Edge or Firefox browsers anymore. I’m seeing an error in the console: “The Player element passed isn’t a Vimeo embed”. I’ll debug later. If anyone finds a fix, please leave a comment below! – Brian

How to Do It

The cool thing is that this isn’t that hard using Vimeo’s API. You can even use your existing iframe embed code; just assign an ID to it and you’re then able to control it using JavaScript.

The HTML

So, I’ve added the id, “video”, to the video iframe. After that, I added an unmute icon (in my case, a png image). Then I wrapped the whole thing in a div so everything can be styled and positioned:

<div id="video-contaner">
<iframe id="video" width="640" height="360" allow="autoplay" src="https://player.vimeo.com/video/646562607?muted=1&autoplay=1&&title=0&byline=0&wmode=transparent&autopause=0" frameborder="0" allowfullscreen="" wmode="opaque"></iframe>
<img id="unmute" src="ADD YOUR ICON URL HERE" />
</div>

Remember to insert the URL of your unmute icon where it says “ADD YOUR ICON URL HERE”. Of course, you should also swap in your Vimeo video number in the URL.

You also may want to change the ID names in the HTML, CSS and JS if you have conflicts.

The CSS

Most of this has to do with centering the unmute button on top of the video.

#video-container {
  text-align:center;
  max-width:640px;
  margin: 0 auto;
  position:relative;
}
#video-container #unmute {
  position: absolute; 
  z-index:99999;
  color: white;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  color:white;
  cursor:pointer;
  width:80px;
  height:80px;
}

The JavaScript

The JavaScript isn’t too complicated. First, we need to source the Vimeo player API code. Then, we grab the iframe using the ID and create a new Vimeo player. Next, we detect when the unmute button is clicked, unmute the audio and hide the unmute button:

<script src="https://player.vimeo.com/api/player.js"></script>
<script>
    const video = document.getElementById('video');
    const player = new Vimeo.Player(video);
    document.getElementById('unmute').onclick=function() {
      player.setMuted(0);
      document.getElementById('unmute').style.display = "none";
    }
</script>

Mobile Browsers

You should get a player like I have in this post. The only caveat is that when I view this video on my iPhone, there is an existing “unmute” button there. My unmute button overlays it so it looks a bit confusing.

There are two solutions. You can make your unmute button large enough to cover the mobile unmute button, or do mobile detection and not display the unmute button on mobile. I’ll leave that as an exercise for the reader, haha.

How About YouTube Videos?

YouTube has a corresponding API that lets you control videos instantiated by iframe via JavaScript as well! See this article:

https://developers.google.com/youtube/iframe_api_reference

I’m sure you can do the same trick of adding an unmute button overlay, but I’m leaving it as an exercise to the reader, haha.

I hope this was helpful. Please leave your comments and questions below. – Brian

Brian Shim

I am a freelance web developer and consultant based in Santa Monica, CA who uses WordPress, PHP, and JavaScript to create websites and web applications for businesses, nonprofits, and organizations.

brianshim.com