How can I add a custom thumbnail over the Vimeo player in Webflow, similar to how it is done on Squarespace?

TL;DR
  • Add a thumbnail image with a play button overlay using absolute positioning in a relative container.  
  • Embed the Vimeo iframe with autoplay=1&muted=1, initially hidden, and use a click interaction to hide the thumbnail and reveal the video.

To add a custom thumbnail overlay on a Vimeo player in Webflow, you need to simulate the "cover thumbnail" behavior by using an image with play button styling that transitions to an embedded video on click.

​

1. Add the Custom Thumbnail Image

​

  • Drag an Image element into your Webflow layout where you want the video.
  • Set the image to your desired thumbnail/cover image.
  • Add a play button icon or SVG overlay using a Div Block with absolute positioning, placed over the image. This mimics the standard video thumbnail look.

​

2. Prepare the Vimeo Embed

​

  • Get the Vimeo embed URL from Vimeo, use the format:  

  https://player.vimeo.com/video/VIDEO-ID?autoplay=1&muted=1

  • The ?autoplay=1&muted=1 parameters ensure it autoplays, which is often required due to browser restrictions.
  • In Webflow, use an Embed element and paste the iframe code using the Embed code widget (from the Add panel → Components → Embed).
  • Make sure the iframe is set to the correct dimensions with display: none initially (can be set in a div with class “video-player” that’s hidden on page load).

​

3. Use Interactions to Toggle Display

​

  • Select the thumbnail wrapper (e.g., a Div containing image and play icon).
  • Go to Interactions panel → Element trigger → Mouse click (tap).
  • Create an animation that:
  • Hides the thumbnail (e.g., display: none or opacity to 0).
  • Shows the iframe-containing div (e.g., display: block or opacity to 1).
  • Make sure the Vimeo iframe URL includes autoplay=1 to start playback immediately.

​

4. Style As Needed

​

  • Ensure the thumbnail image and iframe video are both in the same position and dimensions.
  • Use position: absolute over a common relative container if you want them to fully overlap.

​

Summary

​

To simulate a custom thumbnail for a Vimeo video in Webflow, place an image with a play button overlay above a hidden Vimeo iframe. Use an interaction to swap the thumbnail for the video element on click, using autoplay=1 to play instantly. This recreates the Squarespace-style thumbnail overlay behavior.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
Can Webflow and Vue.js be used together without conflicts? Any best practices or suggestions for using these platforms together?
How can I calculate a value from a number in a Webflow CMS collection, divide it by a fixed number, and use the resulting percentage as the width of a div for each item in the collection? Is there a way to do this without using CSS calc() or jQuery?
Is it possible to create a customer portal with a login feature in Webflow CMS for clients to access unique files and information?
Is there a way to add forced line breaks to fix copy layout issues in Webflow on mobile without affecting the desktop layout?
How can I make the dropdown menu in my Webflow site 100VW without it stretching off the screen? I've tried changing it from absolute positioning, but it became misaligned. Is there a simpler solution?
How can I download a PDF file automatically by visiting a link with no suffix using Webflow's hosting?
Is it possible to make the logo slider in the retailer sections of my Webflow site continuously rotate smoothly from right to left instead of changing like a regular slider?
How can I make my website wider in Webflow for larger monitors?
How can I resolve the "RateLimit: Rate limit hit" error when publishing my Webflow site using Make (formerly Integromat) for automations with the CMS, specifically with a Webflow form triggering a ChatGPT response logged in the CMS?
What could be causing the wrapping issue for a div with a width of 320 pixels and a long heading inside that only wraps when the text is double-clicked in Webflow?
Can sections be named in Webflow for easier identification and organization?
Is it possible to use code in Webflow to implement scroll hijacking and have different background colors for each section on a website?
How can I use Google Maps in a dynamic embed on a CMS template page in Webflow, pulling the address from a field in my collection and applying a Snazzy Style theme to it?
How can I make a button in Webflow append the URL and scroll down the page upon clicking?
Can Webflow be integrated with a custom-built NodeJS backend for creating a custom UI widget based on server responses?
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?
How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?
How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?
How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?
How can I change the language of the Google Maps embed from English to Arabic in Webflow?
How can I reduce the vertical space between lines within a bullet point in Webflow? Can I replace the bullet points with icons on the "Services" page?
How can the text color be changed for custom input fields on Webflow?
How can I add conditional visibility in Webflow to prevent a div from appearing on a published page if a CMS field is empty?
How can I stop a YouTube video from playing in the background in audio mode when I close a modal in Webflow?
How can I connect and use my JavaScript and CSS files for special functions and styles in Webflow?
How can I fix the "Ensure text remains visible during webfont load" warning in Webflow?
How can I implement a ThreeJS script as a background for my Webflow project using custom code?
How can I send data from a Webflow Form to ActiveCampaign without using Zapier? I have set the form to POST and input the form's action URL, similar to Mailchimp but it redirects me to the admin area of ActiveCampaign without sending the data. Has anyone had success with this method?
Can Webflow be used to create a "blob" elements effect in the header of a website using custom code or JavaScript?