How can I change the height of an embedded Vimeo video in Webflow?

TL;DR

Embed the Vimeo iframe in a div block, style the div with fixed or relative height, and set the iframe to fill it using 100% width and height.
For responsive sizing, use a div with position: relative and padding-top for aspect ratio, then absolutely position the iframe inside it.
If using Webflow’s Video component, wrap it in a div and style the wrapper to control sizing and layout.

To change the height of an embedded Vimeo video in Webflow, you need to either style the embed element directly or use Webflow's built-in video component strategically.

1. Use a Responsive Embed with Custom Height

Drag in an Embed element from the Add panel (not the Video element).
Paste your Vimeo iframe embed code into the Embed box.
Wrap the Embed in a div block, give the div a class name, and style that div.
In the Style panel, set a fixed or relative height (e.g., 500px or 56.25% for 16:9).
Set the child Embed element to width: 100% and height: 100% so it fills the parent div.

2. Maintain Aspect Ratio with Padding Trick

Create a div block and assign it a class (e.g., video-wrapper).
Set the video-wrapper position: relative.
Apply padding-top: 56.25% for a 16:9 ratio, or adjust to your desired aspect ratio.
Set overflow: hidden.
Inside it, place an Embed element.
Set the Embed to position: absolute, top: 0, left: 0, width: 100%, height: 100%.

3. Use Webflow’s Video Component Safely

If using Webflow’s Video component, you can’t directly set height.
However, wrap the Video component in a div and set height/width on the wrapper.
Then go to the Style panel and adjust overflow, fitting, and positioning to make the video scale accordingly.

Summary

To change the height of a Vimeo embed in Webflow, wrap the iframe in a styled div and control dimensions via CSS. Use position: relative and padding-top for responsive video, or set a fixed height if you need exact sizing.

Webflow Resources

Webflow templates

Webflow inspiration

Rate this answer

Other Webflow Questions

How can I disable fullPage.js on mobile view in Webflow? I have tried setting related Div Blocks to "Hide on Phone Portrait" but it doesn't seem to work. Is there a way to add a few lines of JavaScript code to achieve this?

How can I resolve the issue of Webflow CMS items not being accessible after publishing, despite the links being correct?

How can I make the first service always open in Webflow, and manually close it when I open the second service?

How can I resolve the issue of images not loading when changing pages or searching for results on Webflow, specifically with regards to a pagination setup using Finsweet? This problem only occurs on the production site, as the staging site works without any issues.

How can I export and integrate the blog collections from my Webflow website to create a fully functional static website?

What are some free alternatives to using Google Sheets and Google Data Studio to create a responsive, filterable, and sortable dynamic table on a simple website built with Webflow?

Can I add rounded corners to Youtube videos and remove all icons except for the play button on the videos in Webflow?

How can I use Webflow to dynamically adjust the column numbers and content order based on different devices and views?

How can I make my form submit button open in a new tab after redirecting in Webflow?

Can I set a responsive vertical slider with the pagination on the right side in Webflow?

How can I fix the issue with interactive map embeds not scaling on tablet and mobile devices on my Webflow website?

Any tips or advice on how to effectively manage SEO, branding, and digital marketing for my web design company without spreading myself too thin? I already know about the importance of backlinks and adding my business to directories, but there's so much to do. Should I consider hiring a digital marketer to handle social media and increase my online presence? Webflow.

Any suggestions on how to automate the cycling of 'tabs' in Webflow at a scheduled interval?

What are the Nameservers for pointing a domain to Webflow?

Is there a way to redirect old URLs to new URLs in Webflow through the use of an .htaccess file?

Can Webflow be used to call a CSS or JS file stored on a different server, instead of hosting them on GitHub?

How can I dynamically redirect to a CMS created after form submission in Webflow?

In Webflow, how can I hide specific elements in the footer (such as "Ramin Khaze The Difference" and "Schedule showing") when the URL contains a certain parameter, such as "?mls"? I am a beginner in coding and would appreciate any help. Thank you!

How can I prevent the "w-current" class in Webflow from overriding the height of my custom class on a link block element?

Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?

How do I mirror user input from a form field to a non-form text field on the same Webflow page in real-time using JavaScript?

How can I close a dropdown in Webflow when clicking on a link?

Is there a more optimal way to create a portfolio section with a sticky image container that changes as you scroll, similar to the design on Deveb's website, that works across different web browsers, especially Safari, using Webflow or any other JavaScript tools?

How can I implement a multi-select field with a pre-selected option in a popup form on a collection page using Webflow?

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?