Skip to main content
Nederlands
Nederlands

iFrame scaling issues and solutions

 

Introduction

An iFrame lets you embed external content — such as a booking system, a map or a web application — directly into a page in your BCS Connect environment. However, layout issues are common: an iFrame that becomes far too large, breaks out of the page, or fails to scale properly on mobile.

In this article you'll learn how an iFrame works, why things go wrong when you use percentages for height and width, how to embed one correctly, and what to do when the iFrame won't load.

Note:
Not every external website allows embedding via an iFrame. Some sites block this through the X-Frame-Options setting. See the Troubleshooting section below for more information.

 

How does an iFrame work?

An iFrame is an HTML element that loads another web page inside a section of your own page. It needs a height and a width so the browser knows how much space to reserve for it.

You can define those dimensions in two ways:

  • Pixels (fixed size) — for the height (recommended): for example height="600px". The height stays the same regardless of screen size, which prevents content from being cut off.
  • Percentages (relative size) — for the width: for example width="100%". The width adapts to the parent element, so the iFrame scales nicely on desktop, tablet and mobile.


Why does it go wrong with percentages above 100%?

The browser calculates percentages relative to the surrounding (parent) element. A value like height="500%" literally means: make the iFrame five times the height of its container. The result:

  • An iFrame that becomes much larger than the page itself.
  • Unexpected alignment and overlapping content.
  • Endless scrolling or a broken layout on mobile.
  • Loss of responsiveness.

 

 

Embedding an iFrame correctly

Follow these steps to embed an external page neatly and responsively.

  1. Open the page in BCS Connect where you want to place the iFrame and switch the editor to HTML mode (source code).

  2. Paste the following code at the desired location:

    <iframe
  src="https://example.com"
  width="100%"
  height="600px"
  style="border: none;"
  frameborder="0">
</iframe>
  3. Replace https://example.com with the URL you want to embed.
  4. Adjust the height to match the content. 600px works well as a default, but for larger applications you can use 800px or 1000px.
  5. Save the page and check the result in an incognito window to confirm everything loads correctly.


What do these attributes do?

  • width="100%": the iFrame adapts to the width of the surrounding element — ideal for responsive layouts on desktop, tablet and mobile.
  • height="600px": a fixed height so the embedded content displays cleanly, without excessive whitespace or cut-off areas.
  • style="border: none;": removes the default border for a cleaner look.
  • frameborder="0": a deprecated attribute, but it ensures older browsers also display no border.
Tip:
Never use percentages above 100% (such as 500% or 640%). Combine a fixed pixel height with a width of 100% for the best result.


 

Advanced adjustments

Want the iFrame to scale even better or fill more of the page? You can fine-tune the behaviour with a few extra CSS settings.

  • Media queries for mobile: use CSS media queries to apply a different height on smaller screens, for example height: 400px on smartphones.
  • Full-page view: use height: 100vh in CSS — the iFrame will then always match the height of the visible viewport.
  • Maintain aspect ratio (16:9, 4:3): wrap the iFrame in a container with a percentage-based padding-bottom to keep video iFrames in a consistent ratio.

 

Troubleshooting

My iFrame is far too large or breaks out of the page

  • Check that you're not using percentages above 100% for the height or width.
  • Replace the height with a fixed pixel value, for example height="600px".
  • Set the width to width="100%" instead of a higher value.

The iFrame stays blank or doesn't load

  • Check the URL in the src attribute: always use https://, not http://.
  • The external site may block embedding via X-Frame-Options or Content-Security-Policy. Open the URL in a new tab: if you see a message like "refused to connect", the site owner does not allow embedding.
  • Ask the owner of the external website to add your BCS Connect domain to their allowed frame-ancestors.

The iFrame doesn't display correctly on mobile

  • Use width="100%" instead of a fixed pixel width.
  • Add a CSS media query to apply a smaller height on smaller screens.

My issue isn't listed here

Send an email describing the issue and the page URL to support.plek@bcs-hr.com. A screenshot is appreciated.