Customize Vimeo Player

Hello! I’m developing a portfolio site that requires a custom Vimeo player, with a play button, pause button, mute button, timer, and progress bar. This website has a perfect example of what I would need (just with different CSS).

I’m assuming that within the Vimeo player for whatever video is playing, there is a piece of data (please forgive/correct my terminology) that corresponds to the play state, pause state, volume, and time that the video has played, which I would then link to with a Javascript event to toggle each of those for the play, pause, and mute buttons. Though from poring over the source code of the above site, and an uncustomized Vimeo video embedded with Kirby’s vimeo() helper, I’m not finding that information.

In short, does this seem like the simplest way to achieve the effect, and if so, am I able to access those pieces of data with Kirby’s vimeo helper? Also, any insight into how I could achieve a progress bar would be greatly appreciated :slight_smile:

Welcome! :~)

Maybe have a look at Vimeo’s SDK: Player SDK: About the Player SDK | Vimeo Developer

There’s also Plyr which allows for custom styled video player interfaces.

Not sure if they work with the vimeo() helper out of the box, you might need to write your own markup.

And – but I don’t know if this works for content from vimeo – if you use the html5 <video> tag, you have access to javascript’s HTMLMediaElement API, so you can easily create your own media player interface. Video and Audio APIs - Learn web development | MDN

Thanks for the info Bruno! Been working with Vimeo’s SDK, and it’s exactly what I was looking for. Not sure how I overlooked it lol. Thanks so much!

1 Like