iFrame - webpage too big
Asked by Alexandra Huang:

How can I embed another site using iFrame but scale it so that it isn't as large in the iFrame box? The site is way too zoomed in... I have the page in a left column that can only be as wide as 400 so I'd like for the webpage within it to scale down at least 50%

I'm thinking I can enter something into "CSS Styles" box but I haven't a clue what to enter there.


Answers:
author: Shannon S
body: Hi Alexandra,

You could try setting a specific width and height to your iframe, and then apply a scale transformation to it.

For example:

```
<iframe width="XXX" height="XXX" src="http://www.atlassian.com" style="-webkit-transform:scale(0.5);-moz-transform-scale(0.5);"></iframe>
```

Let me know if this helps.

Kind Regards,  
Shannon

comments: author: Alexandra Huang
body: Hey Shannon, thanks for helping! I tried entering your script into the "styles" box and it gave me the result as shown in picture '2'   

Picture 1 is what I was able to configure just entering 100% width and 640px Height.

Picture 2 is 100% width and 640px and *\<iframe style="-webkit-transform:scale(0.5);-moz-transform-scale(0.5);"\>\</iframe\>*

Picture 3 is what I would *like* it to look like instead.  

![Untitled.png](https://community.atlassian.com/t5/image/serverpage/image-id/9454iC4BC139BFB23344D/image-size/large?v=v2&px=999 "Untitled.png")


author: Shannon S
body: Hi Alexandra,

I used the HTML macro specifically and I tested with this code:

```
<iframe width="800" height="600" src="http://www.atlassian.com" style="-webkit-transform:scale(0.5);-moz-transform-scale(0.5);"></iframe>
```

Now my page looks like this:

![Screen Shot 2017-11-15 at 5.46.11 PM.png](https://community.atlassian.com/t5/image/serverpage/image-id/9466i5D9A3EFE6550C32F/image-dimensions/548x495?v=v2 "Screen Shot 2017-11-15 at 5.46.11 PM.png")

So with this, it shows the entire span of the webpage in miniature form. I think the only difference is I am putting pixels measurement for both height and width, so perhaps you can try that if you like the results I got?

Kind Regards,  
Shannon


author: Alexandra Huang
body: Hmm... the only HTML macro I have is 'HTML comment' and when I enter your code there, it returns a blank section?

![Capture.PNG](https://community.atlassian.com/t5/image/serverpage/image-id/9468iD8B6E106CFF2CA7F/image-size/large?v=v2&px=999 "Capture.PNG")


author: Shannon S
body: Hi Alexandra,

Have a look at [how to include iframe in Confluence](https://confluence.atlassian.com/confkb/how-to-put-an-iframe-into-confluence-598837531.html) since you will need to activate the HTML macro modules:

1. Login as your Confluence Admin, go to manage add-ons
2. Enable all the modules of the Confluence HTML Macros

Sorry for not mentioning this earlier.

Let me know if you have any trouble.

Kind Regards,  
Shannon


author: Alexandra Huang
body: Ah, thank you for letting me know. I may have to contact my admins, as I do not have the permissions I think.


author: Shannon S
body: No worries, but I think you could do the same thing in the add-on you were using. I just used this one because it's the only one I have.

The difference was that I set the pixel sizes for both height and width where you had previously only set the height and set width to 100%.

You could try that and if it doesn't work you can see if your admin will enable HTML macros for you.

Kind regards,

Shannon


Tags: iframe