Streaming live at 10am (PST)

100% Custom Vimeo Player in Webflow

Hey everyone,

I’m currently attempting to build a fully custom Vimeo video player in Webflow, which is working fantastic so far with the help of posts by @cyberdave & @mattvaru to name a few. So far, I’ve been able to set play options, such as loop, auto-play, inline etc. as well as custom video controls, like play, pause, mute, unmute and restart. My biggest hurdle (but most desirable) is trying to make a custom play bar with cuepoints. I’ve referenced this Vimeo developer guide but not sure where to look (https://developer.vimeo.com/player/sdk/reference)…but I believe it’s likely possible. Does anyone have any insight into this? I’d love to be able to create a completely custom vimeo player in Webflow to showcase :slight_smile:

Preview link: https://preview.webflow.com/preview/pfc-demo?utm_medium=preview_link&utm_source=dashboard&utm_content=pfc-demo&preview=823f9a80b2426e4e8f15c69f6b4e5e28&mode=preview

Published link: pfc-demo.webflow.io

Josh

1 Like

Glad to hear I helped somehow! :smile:

So, are you trying to rebuild this part of the player?

@mattvaru Yes! From that picture specifically, the play/pause button is covered…the CC and volume is also do-able…and the settings won’t really matter. That play bar seems to be the missing piece!

Hmm, I can take a better look at this a little later, but I’m not super well-versed in the Vimeo player setup. Might I recommend using plyr.io? It’s a nifty little tool with incredible flexibility. My only complaint is that the docs could be a little clearer, but I think that it can get you exactly what you need. (I can probably answer some questions if you have any.)

You can use Methods to play/pause the player (similar to how you’re doing things now), while also hiding the unwanted pieces on the in-line controls (e.g., leaving just the cue bar.)

Using plyr.io would take a little bit of re-setup on your end, but I think it could be worth it!

This might be an option to try for sure, I just took a look at the docs and it seems do-able. I’d just need to get a bit used to it first lol. Like I said, I’m sure this is all possible. I’ve actually accomplished more than I had initially hoped for the video customization, so this would honestly be a nice finishing touch :slight_smile:

1 Like