How can I create a responsive iframe in a Webflow column that scales proportionally with different screen widths?
TL;DR
- Place the iframe inside an Embed within a wrapper div that has relative positioning, 0 height, 100% width, and padding-top to maintain the aspect ratio (e.g. 56.25% for 16:9).
- Style the iframe with absolute positioning and set all sides to 0 with 100% width and height to ensure it fills the wrapper responsively.
To make an iframe responsive inside a Webflow column, you need to maintain its aspect ratio while allowing it to scale with the column width.
1. Set Up the Embed Element
- Drag an Embed component into your Webflow column.
- Paste your iframe code inside the embed, but remove any fixed width or height attributes from the iframe tag itself.
2. Use a Wrapper Div for Aspect Ratio
- Add a Div Block and place the Embed element inside it.
- Give the Wrapper Div a class name (e.g.,
iframe-wrapper). - In the Style panel:
- Set Position to Relative.
- Set Padding-Top to match the aspect ratio you want:
- For 16:9, use 56.25%.
- For 4:3, use 75%, etc.
- Set Height to 0px.
- Set Width to 100%.
3. Style the Iframe Inside
- Select the iframe element within the Embed and use inline styles in the code:
- Set Position to absolute.
- Set Top, Left, Bottom, and Right to 0.
- Set Width and Height to 100%.
- Example inline style:
<iframe src="..." style="position:absolute; top:0; left:0; width:100%; height:100%;" allowfullscreen></iframe>
4. Test Across Breakpoints
- Preview your site and check the iframe scaling on different screen sizes.
- It should maintain the correct aspect ratio and fill the column responsively.
Summary
Wrap your iframe in a div with padding-top for aspect ratio, and make the iframe absolutely positioned to fill that container. This ensures the iframe scales proportionally inside your Webflow column across all screen sizes.