How can I make my iframe embed responsive in Webflow?

TL;DR

Wrap the iframe in a Div with class (e.g., iframe-wrapper) and set its position to relative, height to 0, width to 100%, and padding-top (e.g. 56.25%) to maintain aspect ratio.
Inside the wrapper, set the iframe to position absolute with top/left 0 and width/height 100% to ensure full scaling.

To make your iframe embed responsive in Webflow, you need to control its aspect ratio inside a container that scales with the page.

1. Wrap the Iframe in a Div Block

Drag a Div Block onto your canvas to serve as a wrapper for the iframe.
Give the Div a class name like iframe-wrapper.
Inside the Div, add your Embed element or paste your iframe code directly if you're using the Embed component.

2. Set the Wrapper to Maintain Aspect Ratio

Select the iframe-wrapper Div and set its position to relative.
Give it a padding-top value to simulate aspect ratio. For 16:9 ratio (standard for videos), set padding-top: 56.25%.
Set height to 0px.
Set width to 100% so it adjusts with the parent container.

3. Style the iFrame for Full Coverage

In the iframe's Embed block, after pasting the iframe code, apply inline styles to the iframe tag:
Add width="100%", height="100%".
Add style="position:absolute; top:0; left:0; width:100%; height:100%;" directly in the iframe element.

Example iframe tag (within the Embed element):
<iframe src="your-video-url" frameborder="0" allowfullscreen style="position:absolute; top:0; left:0; width:100%; height:100%;"></iframe>

4. Check Display Settings

Ensure the Embed element itself is not adding extra padding or margins.
Make sure the containing sections or grids are mobile-responsive.

Summary

Wrap your iframe in a Div that uses padding-top for aspect ratio, position the iframe absolutely inside that wrapper, and set its width and height to 100%. This will make your iframe scale fluidly across all screen sizes.

Webflow Resources

Webflow templates

Webflow inspiration

Rate this answer

Other Webflow Questions

How can I add an MP4 file to my Webflow site?

How can I use the "clamp" function with Webflow? I have already placed an HTML Embed code in the body to apply custom styling, and I have set the root with my variables. However, the "clamp" function is not working. Can someone help me with this issue in Webflow?

Can I create a split screen website in Webflow where the scrolling is determined by the position of the mouse on each side, without needing to write code in CSS/HTML?

How can I optimize my video and photo-heavy website in Webflow to improve web vitals and handle JavaScript?

How can I change the color of a button on my side nav in Webflow when it is pressed and its landing page is opened?

When will Webflow allow for separating interactions from the element they are applied to?

Can I host custom .css and .js files on Webflow for specific projects, such as using the Slick plugin for sliders on my Webflow project?

Where can I find better tutorials to learn Webflow, particularly regarding the "Collection" feature, as I am finding the Webflow University lessons difficult to follow?

Why is my form in Webflow not submitting on my live environment but is submitting on my staging environment? I am receiving an internal server error (http code 500) and a CORS policy error message. How can I resolve this issue?

How can I apply the same settings (such as cover and no-repeat) for CMS background images in Webflow as I do for other background images?

How do I adjust the zoomed-in Facebook icon when sharing my Webflow site?

What is the process of displaying CMS Collection Item Fields as editable input fields using an HTML Embed in Webflow?

Why does a font appear differently in Webflow compared to Figma and how can I resolve this?

How can I remove an element from a Webflow page, such as a navbar, container, link block, or label? I don't see a delete button or trash bin option and need to know how to proceed.

What are the uses of Webflow and its integrations with third party tools?

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!

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?