Webflow sync, pageviews & more.
NEW

How can I make my iframe embed responsive in Webflow?

TL;DR
  • Drag an Embed element into a Div block set to 100% width and relative position, with top padding (e.g., 56.25%) to preserve aspect ratio.
  • Style the iframe with absolute positioning, top/left 0, and width/height 100% to make it scale responsively within the wrapper.

To make an iframe embed responsive in Webflow, you need to ensure it scales correctly across screen sizes while maintaining its aspect ratio.

1. Use the Embed Element in Webflow

  • Drag the Embed element into your Webflow project from the Add panel (under Components).
  • Paste your iframe code into the Embed box.

2. Wrap the iFrame in a Responsive Div

  • Place the Embed element inside a Div block. This wrapper will control the aspect ratio and scaling.
  • Set the wrapper’s position to “relative” and width to 100%.
  • Add a top padding to the wrapper to preserve aspect ratio (e.g., 56.25% for 16:9).

3. Style the iFrame for Responsiveness

  • In the Embed code, add styling to the iframe tag:
  • Set position: absolute
  • Set top: 0; left: 0
  • Set width: 100%; height: 100%

This makes the iframe fill its relatively positioned wrapper, and the top padding creates the correct aspect ratio.

4. Use Webflow’s Video or Embed Best Practices

  • For YouTube or Vimeo videos, consider using Webflow’s built-in Video element, which is responsive by default.
  • For third-party iframes (e.g., maps), follow the wrapper method above.

Summary

Wrap the iframe inside a Div block with 100% width and padding-top for aspect ratio, then set the iframe itself to absolute position with width/height at 100%. This ensures your embedded content remains responsive across devices.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
What is the best way to export a dynamic site from Webflow as a PDF file without encountering CORS policy errors?
How can I fix the issue with interactive map embeds not scaling on tablet and mobile devices on my Webflow website?
How can I create a responsive grid layout in Webflow with an image and text, which stacks in a 2 x 1 layout on mobile?
Can I create a similar text animation in Webflow using web-based tools and integrate it with scrolling functionality?
Does Webflow have an integration or feature available for website commenting?
What can I do to fix the error I'm encountering when trying to integrate my Adobe Fonts into my Webflow portfolio website?
Is there a simple way to add an animated gradient background to a section or div in Webflow, without needing extensive knowledge of custom code?
Has anyone encountered issues with a black background appearing before the pixel distortion effect loads on the Webflow home page when implementing this effect? Any insights or solutions would be appreciated.
How can I fix an element to scroll within a section in Webflow, similar to the animation used for the share function on the Webflow blog?
What are the required records to connect a subdomain to Webflow if the main domain is not meant to be connected?
Why is the filtered checkbox not working when I click on each profession in Webflow? And why is the collection list I created in the multi-reference field not showing in the Collection List I created, requiring me to use options for the collection?
How can I edit text in text blocks of a Webflow template?
How can I create a slider on mobile where cards turn into slides, using Webflow?
How can I disable animations on a specific mobile device in Webflow?
How was a video background successfully loaded on mobile using Webflow?
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!
How can I prevent the "w-current" class in Webflow from overriding the height of my custom class on a link block element?
Can anyone help me add a digital clock and date to my Webflow site? I've been able to add custom code, but I need assistance with styling the text. Thank you in advance for your help!
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How do I mirror user input from a form field to a non-form text field on the same Webflow page in real-time using JavaScript?
How can I close a dropdown in Webflow when clicking on a link?
Is there a more optimal way to create a portfolio section with a sticky image container that changes as you scroll, similar to the design on Deveb's website, that works across different web browsers, especially Safari, using Webflow or any other JavaScript tools?
How can I implement a multi-select field with a pre-selected option in a popup form on a collection page using Webflow?
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?