Have you encountered a similar issue when embedding a Vimeo video on a Webflow page where there is a 1 px grey border around the container holder? Is custom code required to fix this?
Published on
September 22, 2023
When embedding a Vimeo video on a Webflow page, you may encounter a 1px grey border around the container holder. This border is added by Vimeo and can be a bit frustrating if you're aiming for a clean, borderless design. However, there are a couple of ways to resolve this issue without requiring custom code:
- Hide the border with CSS: You can use CSS to target the Vimeo container and hide the border. Here's an example of the CSS code you can use:
iframe[src*="vimeo.com"] { border: none !important;}
You can add this code either in the "Page Settings" panel in Webflow or directly in the Custom Code section of your project settings. Make sure to publish your site to see the changes take effect.
- Adjust the Vimeo embed settings: Another option is to modify the embed settings when generating the Vimeo video iframe code. Instead of using the default settings, you can customize the embedding options to remove the border. Here's how you can do it:
- Go to the Vimeo video you want to embed and click on the "Share" button.
- In the "Embed" tab, click on the "Show options" link.
- Look for the "Player preferences" section and tick the "Show player controls" checkbox.
- Scroll down to the "Embedded controls" section and uncheck the "Add player parameters" and "Add color parameters" checkboxes.
- Finally, copy the updated embed code and paste it into your Webflow site.
By following either of these methods, you should be able to remove the 1px grey border around the Vimeo video container without having to resort to custom code.
Additional questions:
- How can I customize the appearance of a Vimeo video embedded in Webflow?
- Can I embed a YouTube video in Webflow without a border?
- Is it possible to autoplay a Vimeo video in Webflow?