0

How do I resize a Iframe's contents to fill the width/height of the Iframe?

I've changed the width and height of the Iframe to make it bigger, however the content is not scaling with it which leaves a bunch of whitespace (It's like the content is absolutely positioned at the top left of the Iframe).

<iframe width="500px" height="300px" frameborder="0" 
  scrolling="no" src="someContent">
</iframe>

Why doesn't the Iframe's content scale when you set an Iframe's width/height?

gru
  • 2,319
  • 6
  • 24
  • 39
web-dev
  • 133
  • 2
  • 11
  • What do you mean by scale? Do you mean you'd like to zoom the content? – evolutionxbox Jan 25 '22 at 20:52
  • I would like the content to fit the size of the Iframe's new dimensions. The content seems to be a fixed size so when I increase the width/height of the Iframe, the content's size does not change. – web-dev Jan 25 '22 at 21:21
  • do you have control over the iframe content? is it your website that you can edit? – evolutionxbox Jan 25 '22 at 21:23
  • Can you provide a minimal example (e.g. in a snippet), so the community can help you better? – gru Jan 25 '22 at 21:25
  • @AlexGru . Say the content fits the width and height mentioned in the Iframe. If I increase the iFrame size to say 1000px/600px, the content stays the same size, but the frame increases. I would like the content's size to increase to fill the new Iframe's dimensions. – web-dev Jan 25 '22 at 21:49
  • @evolutionxbox I don't think I have control. I was thinking more in terms of the content being a chart from an Excel spreadsheet or a video from YouTube – web-dev Jan 25 '22 at 21:53

1 Answers1

0

If you don't have control over the content of the iframe (i.e. you cannot edit the source), you could try to scale the iframe, like this:

<iframe width="500px" height="300px" frameborder="0" 
  scrolling="no" src="someContent" 
  style="-webkit-transform:scale(0.5);-moz-transform-scale(0.5);">
</iframe>

You should experiment with height, width and the scale value to achieve your desired result.

Also see: Resize external website content to fit iFrame width

gru
  • 2,319
  • 6
  • 24
  • 39
  • 1
    With this method the width and height of the Iframe seem to be changing but not the size of the content. The content i'm testing is a chart from an Excel spreadsheet if that makes any difference. (used onedrive to embed a chart in a webpage via Iframe) – web-dev Jan 25 '22 at 22:09
  • Have you experimented with different combinations of `width`, `height` and `scale`? – gru Jan 25 '22 at 22:12
  • I was experimenting with the scale as I would like the IFrame to be a specific size – web-dev Jan 25 '22 at 22:15
  • I'm afraid you don't have any other options than that, since you cannot edit the styles of the external content in the iframe. – gru Jan 25 '22 at 22:23