Streaming live at 10am (PST)

Is it possible to customize the Vimeo play button within Webflow?

Hello.
On this page http://55-corinthian-drive.webflow.io/ we are using a Vimeo video within the Webflow video module. We want to customize the play button; has anybody had any success in changing the play button’s appearance (we want a circle background, not the default Vimeo rectangle shape) using this setup? And if so could you please advise as to how you went about it.

Cheers.
Grant

By webflow? No. By custom CSS -&- JS - Maybe, but this is not so easy.

Options for Vimeo Plus, PRO, and Business members:


CUSTOM CODE

By viemo API (Not webflow module) (You should know JS/CSS to move this idea/code to webflow). In my opinion :slight_smile: dont do this (For circle button)

1 Like

Hi there. I’ve been looking at some jquery options and tried a few things, nothing has really worked for me so I’m going to leave it as is. But thanks for your time and attention on this! I appreciate it.
Grant

1 Like

Would love to know if you ever revisited this idea? I want to do this but not sure how.

Hi Chris,

Yes, I got it to work, wasn’t straight forward; uses a script to trigger an iframe over the top of the static image - but it seems that some browser situations aren’t perfect or give the same result. Compare the video playing of this page https://www.55c.co.nz/the-building between Windows os Firefox and Chrome. Works perfectly on Firefox, not so well on Chrome. But works perfectly on Macbook Chrome. Not sure what has changed since it was put together as it was all behaving the same at the time of the build.

The video play function is controlled by a script in an embedded html element. On clicking the video trigger (the play button), the video iframe displays in place. You can see it here.

https://preview.webflow.com/preview/55-corinthian-drive?utm_medium=preview_link&utm_source=dashboard&utm_content=55-corinthian-drive&preview=d3c316a489deb919c1b92e7530713534&mode=preview

Hope that helps?
Grant

Hi Grant,

Is it possible for you to share the script you creates to do this ?

It would be very helpfull

Cheers
Michael

Hi Michael,

Sorry for the delay in answering. If it’s still useful to you, take a look at the script in the Embedded HTML element directly below the video on the homepage.

//preview./preview/55-corinthian-drive?utm_medium=preview_link&utm_source=designer&utm_content=55-corinthian-drive&preview=d3c316a489deb919c1b92e7530713534&mode=preview

Grant