How to Implement a Responsive iFrame

Embedding an iFrame allows you to display content from another website or service directly on your page. However, by default, iFrames have fixed widths and heights, which can break your layout on different screen sizes or devices.

Making an iFrame responsive ensures it automatically adjusts its size to fit the screen, maintaining the correct aspect ratio and improving the user experience on desktops, tablets, and mobile devices.

1️⃣ Wrap the iFrame in a Div

Use a wrapper div around your iFrame to make it responsive. Example:

<div class="iframe-wrapper">
  <iframe 
    src="https://example.com"
    title="Example iframe"
    allowfullscreen>
  </iframe>
</div>

• iframe-wrapper: This div will control the size and aspect ratio of the iFrame.

• allowfullscreen: Optional attribute to enable full-screen mode.

2️⃣ Add the Required CSS

Place the following CSS above your iFrame in the widget or in your page’s <style> section:

<style>
.iframe-wrapper {
   position: relative;
   width: 100%;
   padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
   height: 0;
   overflow: hidden;
}

.iframe-wrapper iframe {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   border: 0;
}
</style>

• .iframe-wrapper

  • position: relative; and padding-bottom: 56.25% maintain the aspect ratio.

  • overflow: hidden; prevents scrollbars from appearing.

• .iframe-wrapper iframe

  • position: absolute; and inset: 0; make the iFrame fill the wrapper completely.

  • width and height set to 100% ensure responsiveness across devices.

3️⃣ Save and Refresh

1. Save the widget containing your iFrame.

2. Save the page you are editing.

3. Refresh the page in your browser to verify the iFrame displays correctly and scales responsively.

✅ Tip: Adjust the padding-bottom in .iframe-wrapper to match other aspect ratios (e.g., 75% for 4:3).