Hide Vimeo Player Controls and Use Custom Play Button Overlay

Community resources General
1

I have a video embedded using Vimeo. I want to hide the Vimeo player controls. The thing is when I do, the sound disappears.

I want to hide the Vimeo controls and have a play button overlaying the centre of the video. When you click the video it plays, when you click it again, it pauses, when you click it again it plays, etc.

When you hover over, a pause icon appears.

How can I achieve this?

This is my current code:

<div class="video-container">
    <iframe src="https://player.vimeo.com/video/######?autoplay=1&amp;controls=0&amp;loop=1&amp;muted=0" width="100%" height="960px" frameborder="0" allow="autoplay; fullscreen" title="Video Title"></iframe>
</div>

I tried ChatGPT but the code it’s giving me isn’t working. I have 2 div blocks named play-button and pause-button (may not need the pause-button) with each of their respective icons in it.

2

If Vimeo embeds don’t support this directly you might go with a custom player.

Another option is to use Vimeo Pro, get the audio stream and put it in a standard <video> element, then you have full JS control over building your own controls.