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

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.