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

TL;DR

Use the Embed element in Webflow and paste your modified Vimeo iframe code without inline height or width.
Wrap the iframe in a div with a set aspect ratio using padding-top (e.g., 56.25%) and apply absolute positioning to the iframe for proper responsive scaling.

To embed a Vimeo video in Webflow without having its height automatically set to 100%, you need to avoid the default iframe stretching behavior by controlling the embed container's aspect ratio and removing problematic CSS.

1. Use the Embed Element in Webflow

Drag the Embed element from the Add panel into the desired section of your page.
Paste your custom Vimeo iframe code into the Embed field.

2. Remove Height and Width Styles from the iFrame

In the Vimeo embed code, remove any inline height="100%" or width="100%".
Instead, set width="560" and height="315" or allow Webflow to style it responsively.

Example (edited version of default Vimeo embed):

<iframe src="https://player.vimeo.com/video/123456789" width="560" height="315" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>

3. Wrap Your iFrame in a Responsive Container

Create a div block and give it a class name, such as video-wrapper.
Apply the following styles to that video-wrapper:
Position: Relative
Padding Top: 56.25% (for 16:9 aspect ratio)
Height: 0
Overflow: Hidden

Then set the embed iframe styles:
Position: Absolute
Top/Left: 0
Width/Height: 100%

This technique uses the padding-top ratio trick to maintain the correct aspect ratio.

4. Optional: Disable Lazy Loading or Customize Behavior

Vimeo sometimes causes sizing issues if lazy loading is enabled or scripts interfere. Ensure the iframe has no unexpected attributes unless needed.
You can append parameters like ?autoplay=1&muted=1 after the video ID to control video behavior.

Summary

To stop a Vimeo embed from having a height of 100% in Webflow, remove the inline height setting, and instead wrap the iframe in a responsive div using padding-top ratio with absolute positioning on the iframe. This ensures the video scales correctly across all devices.

Webflow Resources

Webflow templates

Webflow inspiration

Rate this answer

Other Webflow Questions

How to create a Masonry Layout using Flexbox in Webflow?

How can I include HTML code as a field in a Webflow Collection?

How can I configure Webflow so that the preloader only appears during the first visit to the website?

How can I add an image when sharing my website on platforms like Messenger?

How can I make the first option in a drop-down field not selectable in Webflow?

Can Webflow with CMS and Memberships be used to create a system where mechanics manually approve jobs in their area, removing the job from other mechanics' view, and then receive full job information after approval? Is there an alternative recommendation for this setup?

When using Webflow, why does setting a Div inside another Div to position:Absolute always make the parent object the Body, even if it's not the actual parent? Also, why does clicking on the Body link next to the target icon not change the parent as indicated in the interface?

What settings are needed in Webflow to make a DIV element, set to 100% width and height, occupy the full space of its parent element (a link block)?

How can I pass URL parameters to a redirect URL in Webflow? I need to be able to do this on any link on the page, and also include form dropdown selections.

How can I make a modal pop up on exit intent in Webflow? My site is Read-Only.

How do I add the code (backgroundAlpha:1) to the hero section in Webflow for a background?

How can I make individual divs show/hide on hover for each accreditation image in Webflow using legacy interactions?

How can I achieve the desired result using Webflow?

Has anyone implemented code to automatically redirect visitors to country-specific websites in Webflow? For example, if a person located in Denmark visits the .no site, can they be redirected to the dk site?

Can a PDF file be directly viewed on a Webflow website without downloading it?

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?