How can I make my iframe embed responsive in Webflow?

TL;DR
  • Wrap the iframe in a relatively positioned div with 100% width, 0 height, and padding-top set to the desired aspect ratio (e.g., 56.25% for 16:9).  
  • Inside the div, place the iframe in an Embed element set to absolute positioning and 100% width and height.

To make an iframe embed responsive in Webflow, you need to wrap the iframe in a div with a fixed aspect ratio and apply CSS settings to scale the iframe properly within that container. Webflow doesn't automatically make iframes responsive.

​

1. Wrap the Embed in a Div Block

​

  • Drag a Div Block onto your page where you want the iframe.
  • Give it a class name, such as responsive-embed.
  • Set the position to Relative in the Style panel.

​

2. Create Responsive Aspect Ratio

​

  • In the Style panel for the responsive-embed div:
  • Set Padding-Top to define the aspect ratio (e.g., use 56.25% for 16:9).
  • Set Width to 100%.
  • Set Height to 0px.
  • This uses the padding-top % trick, where padding is based on width—thus keeping the aspect ratio.

​

3. Embed the Iframe Absolutely

​

  • Drag an Embed element into the responsive-embed div.
  • Paste your iframe code inside—but remove width and height attributes if they exist.
  • Click out of the embed and select it.
  • In the Style panel for the embed:
  • Set Position to Absolute.
  • Set Top, Bottom, Left, and Right to 0.
  • Set Width and Height to 100%.

​

4. Optional: Optimize for Loading

​

  • You can add attributes directly inside your iframe tag for better performance:
  • Use loading="lazy" to defer loading until it's in view.
  • Add title for accessibility best practices.

​

Summary

​

To make iframes responsive in Webflow, wrap the iframe in a relatively positioned div with a fixed aspect ratio using padding-top, then set the iframe to be absolutely positioned and scaled to 100% of its parent container. This ensures it scales fluidly on different screen sizes.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
Can I use the Lottie integration with the Webflow CMS to dynamically fill a Lottie element on each individual CMS entry using a uploaded JSON file?
How can I make the bottom wrapper show on tablets and mobile devices in Webflow? I have applied SVH to the hero section, but it is still being clipped on an iPad (10") and is completely invisible on an iPhone (8). Any suggestions?
How can I remove auto-generated columns in Webflow's tablet view to make a navigation bar with only 4 columns and 2 rows?
What is the best practice for keeping images in the same area within a hero section in Webflow? Should I create a large image with all the images in it and use that as the background, or should I create a grid with each section having a relative position instead of the body?
Has anyone here used Webflow and can share their experience?
Why is the navigation between tabs not working when using buttons with IDs in Webflow?
What are some third party tools or integrations that can be used with Webflow?
Is there a way to handle the 10,000 character limit on custom code elements in Webflow?
How can I lock the size of an image in Webflow so that it remains the same within a circle or line, even when I replace the image?
Can I make at least one checkbox in a group required in Webflow? If users don't select at least one checkbox, can I show an error message?
Can I create a portfolio site on Webflow using subdomains for multiple example sites, and can they all be published under a single Website Site Plan or would I need separate plans for each site? Can I also export some of the example sites and host them outside of Webflow to save costs?
What could be causing my Webflow site to not be indexed by Google, despite following the guidelines and everything appearing to be in order?
How can I create a looped distortion effect on a selected picture in Webflow without any interaction on hover?
Is it possible to redirect a page on my Webflow website to the URL http://krystle_svetlana.dribbble.com, and if so, how can I do it?
How can I stop a YouTube video from playing in the background in audio mode when I close a modal in Webflow?
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?
How can I implement a ThreeJS script as a background for my Webflow project using custom code?
How can I send data from a Webflow Form to ActiveCampaign without using Zapier? I have set the form to POST and input the form's action URL, similar to Mailchimp but it redirects me to the admin area of ActiveCampaign without sending the data. Has anyone had success with this method?
Can Webflow be used to create a "blob" elements effect in the header of a website using custom code or JavaScript?