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
- Paste the Vimeo embed code into a Webflow Embed element with fixed width and height attributes.
- For responsive design, wrap the embed in a div with relative positioning and padding-bottom (e.g., 56.25%), and style the iframe with absolute positioning and full width/height.
To prevent a Vimeo embed from having its height automatically set to 100%, you need to override Vimeo's default behavior and manually control the embed container's dimensions in Webflow.
1. Use the Embed Element in Webflow
- Drag and drop the Embed element from the Add panel into your page where you want the video to appear.
- Inside the Embed code editor, paste the Vimeo embed code.
- Example Vimeo embed code:
<iframe src="https://player.vimeo.com/video/VIDEO_ID" width="640" height="360" frameborder="0" allowfullscreen></iframe>
2. Remove Auto-Responsiveness from Vimeo
- Avoid using embed codes that depend on 100% height or aspect-ratio hacks unless you manage them manually.
- Ensure the iframe tag contains defined width and height attributes. Avoid setting
height="100%".
3. Control Dimensions via Webflow Styling
- Select the Embed element in Webflow.
- In the Style panel, set a fixed width and height (e.g., width: 640px, height: 360px).
- Alternatively, to make it responsive, set the width to 100% and the height to a value that preserves the aspect ratio using Webflow’s padding trick.
4. Make It Responsive with Aspect Ratio (Optional)
- Wrap the Embed element in a div block.
- Set the outer div's position to relative.
- Give the div a padding-bottom of 56.25% (for 16:9 aspect ratio); leave the height at 0 and width at 100%.
- Set the iframe inside the Embed to position: absolute, top: 0, left: 0, width: 100%, and height: 100% via inline styles in the
<iframe>tag.
Example inline styling:<iframe src="https://player.vimeo.com/video/VIDEO_ID" style="position:absolute; top:0; left:0; width:100%; height:100%;" frameborder="0" allowfullscreen></iframe>
5. Check Published Results
- Publish or preview your site to verify that the Vimeo video is embedded correctly, without overflowing or stretching due to 100% height.
Summary
To prevent Vimeo from setting the height to 100%, paste the embed code into Webflow’s Embed element with defined width and height attributes, or use a responsive container with CSS positioning and padding trick. Avoid leaving height at 100% unless you manually constrain the parent container.