Webflow sync, pageviews & more.
NEW
Answers

How can I properly insert the embed code of a Vimeo video into my Webflow site without the height being automatically set to 100%?

When inserting the embed code of a Vimeo video into your Webflow site, you may encounter the issue of the height being automatically set to 100%. To avoid this, you can follow these steps:

1. First, locate the embed code for your Vimeo video. You can find this by visiting the video on Vimeo, clicking on the "Share" button, and selecting the "Embed" option.

2. Copy the embed code provided by Vimeo.

3. In Webflow, navigate to the page where you want to add the video and enter the Designer view.

4. Drag a new Embed element onto your page from the Elements panel or add it to an existing container on your page.

5. Paste the Vimeo embed code into the Embed element.

6. Find the line of code within the embed code that sets the height, usually denoted as "height=".

7. Replace the value of the height attribute with a fixed pixel value that matches your desired height. For example, you can set it to "400px" if you want the video to be 400 pixels tall.

8. Save the changes and preview the page to see the Vimeo video embedded with the correct height.

By modifying the height attribute to a specific pixel value, you can override the default behavior of Webflow that sets the height to 100%. This allows you to have more control over the dimensions of your Vimeo video within your Webflow site.

Rate this answer

Other Webflow Questions