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

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.
Please Leave a Question or Comment
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?
Hi Alex,
My code is no longer working in Edge or Safari, and I haven’t been able to figure out the problem… sorry. That would be a necessary starting point for what you want to do. If you find a solution, let me know.
Best,
Brian
Case player.setVolume(1); don’t works, try player.setMuted(0);
Many thanks for this fix! Something seems to have changed, as it was working before. I’ve updated the article accordingly. – Brian