How can I create a responsive iframe in a Webflow column that scales proportionally with different screen widths?

TL;DR
  • Drag the Embed element into your column and paste the iFrame code.
  • Wrap the iFrame in a Div Block, set its position to Relative, and use Padding-Top to maintain aspect ratio.
  • Set the iFrame to Absolute Positioning to fill the Div Block and test across devices using the Webflow Designer preview tool.

Creating a responsive iframe in a Webflow column involves adjusting the iframe size to scale proportionally with different screen widths.

​

1. Insert Your iFrame

​

  • Drag the Embed element from the Add Elements panel into your desired column.
  • Paste your iFrame code into the Embed Code Text area.

​

2. Set the iFrame to Responsive

​

  • Wrap the iFrame in a Div Block for more control over its dimensions.
  • Select the Div Block in the Navigator or Designer panel.
  • Set the position to Relative under the Position settings.

​

3. Adjust the Dimensions for Responsiveness

​

  • Apply a Padding-Top percentage to keep the aspect ratio. Standard percentage values like 56.25% for a 16:9 aspect ratio can be used.
  • Set the iFrame to Absolute Positioning so it fills the parent Div Block.
  • Stretch to the full width and height of the Div Block by setting the iFrame’s position settings to top, left, right, and bottom at 0px.

​

4. Test Across Different Screen Sizes

​

  • Use the Webflow Designer preview tool to check how the responsive iFrame looks on different devices (Desktop, Tablet, Mobile Landscape, Mobile Portrait).
  • Adjust percentage padding or width settings if necessary to maintain the desired aspect ratio.

​

Summary

​

To produce a responsive iframe in Webflow, create a wrapper Div Block with specific padding and set the iFrame to absolute positioning within this block. This ensures the iFrame scales proportionally across various screen sizes.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
How can I make all external links open in a new tab by default on my Webflow site, while keeping internal links opening in the current tab? Is there a solution that doesn't involve manually ticking a box for each link? Thank you!
How can I redirect users to a specific page on my website after submitting a form linked to Google Forms in Webflow?
How can I integrate my website page with my Twitter account using Webflow?
Is there a tutorial available on Webflow or any third party tool that explains how to create a resizing nav bar that smoothly adjusts the logo, nav bar height, and other elements as you scroll down on a webpage?
Is it possible to add the Google Tracking code in Webflow Standard forms for a short success message without a redirect page?
How can I make related posts appear on my individual blog page in Webflow? I have two collections: one with all my blog posts and another with my categories. I have created a reference for "Category" in the blog posts collection that links to the second collection. When I try to create a new collection list at the bottom of the individual blog page and filter the posts to match the category of the current post, there is no option to filter by category. I have already reviewed various resources and tutorials but haven't found a solution. Can someone please assist me?
What can I do to improve the JavaScript performance of my Webflow site?
How can I prevent horizontal scroll bars and white space from appearing on a webpage longer than the vertical height when using 100vw in Webflow?
How can I embed an MP4 video into my Webflow project without using external video hosting and loading it from my local device, since I won't have internet access?
How can I link my nav logo back to the home section using Webflow?
How can I create a thumbnail image slider in Webflow without the lightbox feature?
What could be causing my Webflow CMS page with a password to redirect to a 404 page, even though I am entering the correct password on the published site?
Is it possible to write a JavaScript code in Webflow to hide a parent DIV element when a child element is set to Block, specifically when a CMS collection has no items?
What are the ramifications of removing these from the HTML tag in Webflow? Can I remove them if I'm using my own server for form submissions?
What are the benefits and uses of 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?