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!

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

Shares

Please Leave a Question or Comment

Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

4 Comments
Inline Feedbacks
View all comments
Alex
Alex
10 months ago

Hi Brian,

I think this is close to what I’m attempting to create. I’m trying to figure out how to embed a Vimeo video, except I want another looping video playing as an overlay exactly the same size as the embedded video. When a visitor clicks the overlay, I want the overlay video to disappear and start playing the embedded Vimeo video underneath. Do you know how that would be coded?

Anonymo
Anonymo
1 year ago

Case player.setVolume(1); don’t works, try player.setMuted(0);