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 (Vimeo)…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
@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
@mattvaru for the purpose of using CMS, I’m attempting to make both videos (which are iframe) CMS-driven. I got them both in place, my only issue is that when clicking the play button, its pausing the BG video and then when closing the big video, its still remaining paused. This was the code you had in your example:
<script>
var Webflow = Webflow || [];
Webflow.push(function () {
// DOMready has fired
// May now use jQuery and Webflow API
var iframe = document.querySelector('#longVideo');
var player = new Vimeo.Player(iframe);
$('#btnPlay').click(function() {
player.play();
});
$('#btnClose').click(function() {
player.pause();
});
$('#btnMute').click(function() {
player.setVolume(0);
});
$('#btnUnmute').click(function() {
player.setVolume(1);
});
$('#btnPause').click(function() {
player.pause();
});
$('#btnRestart').click(function() {
player.unload();
player.play();
});
});
</script>
I included some of my own pieces for player control. Is there a reason this would be controlling both iframes? I tried giving both a unique ID and still is affecting both. Any ideas?
Never mind for anyone who may come across this problem down the road, 2 embedded iframes from Vimeo, such as a BG video and main video, will require “&autopause=0” to be added to each video you do NOT want to pause when the other is playing. It will keep it running continuously. “&background=1” will not be enough to keep autoplay active.
Glad you were able to get it resolved! Website looks great, by the way.
Side note: If you are ever wanting to use a custom inline play bar like you wrote about in the initial post, I finally got around to writing a formal tutorial (with a cloneable project) on how to use plyr.io within a Webflow project. It specifically covers Vimeo videos as well, so if you ever want to integrate it, you can find the tutorial here!
I found setting up PLRY easy thanks to your article, but customizing the CSS hasn’t been as easy, even following the hints on the Github page. I would love to know or figure out a little more in that department. I want to customize the duration bar, and everything else to achieve something like this:
for anyone who may come across this problem down the road, 2 embedded iframes from Vimeo, such as a BG video and main video, will require “&autopause=0” to be added to each video you do NOT want to pause when the other is playing. It will keep it running continuously. “&background=1” will not be enough to keep autoplay active.
