How can the appearance of the play button in the Webflow video module be customized to have a circle background instead of the default Vimeo rectangle shape?
TL;DR
- Embed the Vimeo video using a custom iframe with controls disabled.
- Overlay a circular play button using a styled div positioned absolutely over the video.
- Add an interaction to hide the button and trigger video playback on click using Webflow Interactions or custom JavaScript with Vimeo’s SDK.
- Wrap both the iframe and play button in a relative-positioned container to ensure proper overlay alignment.
To customize the play button in Webflow’s video module and replace Vimeo’s default rectangle style with a circular background, you’ll need to overlay a custom button and disable Vimeo’s native button.
1. Embed the Vimeo Video Using a Custom Embed Element
- Use the Embed component instead of the native Webflow Video element.
- Paste your Vimeo video’s iframe URL and append
?background=1&autopause=0&muted=1&autoplay=0&controls=0to disable default controls (modify settings based on your needs). - Example:
<iframe src="https://player.vimeo.com/video/123456789?background=1&autopause=0&muted=1&autoplay=0&controls=0"… loading="lazy"></iframe>
2. Add a Custom Play Button Overlay
- Place a div block above the iframe (within a relative parent container).
- Style the div block:
- Width and Height: Create a square (e.g. 80x80px).
- Border Radius: Set to 50% to make it a circle.
- Background Color: Choose the desired color.
- Position: Set to absolute, and center it with top: 50%, left: 50%, transform: translate(-50%, -50%).
- Add a play icon inside the button using an image or icon block.
3. Create Play Button Interaction
- Use a Webflow Interaction to:
- On click: hide the play button.
- Use a custom trigger (e.g.
element.play()via Embed or use background autoplay tricks with muted videos). - Playing the Vimeo video automatically may require Vimeo’s Player SDK and custom JavaScript for full control.
4. Make the Parent Container Position Relative
- Ensure the iframe and the play button sit inside a parent container with position: relative. This allows you to absolutely position the circle correctly over the video.
Summary
To replace Vimeo’s rectangle play button with a circular custom overlay, embed the video manually using an iframe without controls and overlay your own styled play button using Webflow elements. Then bind an interaction to start the video on click and hide the overlay.