How can I resize an iframe element to change with the screen size?

Question

I have an iframe element (specifically, a business intelligence dashboard) that needs to be embedded into a website. There is an "HTML editor" on the website's "back end" (i.e., a portion within the website that is designated for page admins).

Copying and pasting the iframe code and subsequently adjusting the height and width to properly fit the screen worked fine- but if I open the window on another screen, the iframe dimensions don't adjust for the different screen size.

Unfortunately, I don't think I have access to any CSS files in the company website (i.e., I don't think I have the ability to upload a CSS file), so I'm not too sure what I can do with most suggestions on SO. Does anyone know how I can set the iframe dimensions to be dynamic?

Web development isn't my speciality, so if I could provide better information, feel free to ask in the comments section.

Edited to add: Following the first two responses, I inserted the HTML line

<iframe style="width:100%; height:500px;overflow:auto;">

and the iframe definitely changed sizes- but unfortunately, the grey space behind it (is that padding?) began appearing in different sizes, depending on the computer screen size. I've taken the following picture, with the red arrows pointing to grey space I'd like filled with the iframe and the blue arrows pointing to the iframe itself:

Here is the new code in the HTML editor, but with the link changed (to keep it anonymous):

<center>
    <div>
        <iframe style="width: 100%; height: 710px; overflow: auto;" src="https://app.powerbi.com/view?r=abc123..." frameborder="0" width="320" height="240">
        </iframe>
    </div>
</center>

For what it's worth, I've tried to delete the width="320" height="240" snippet at the end of the <iframe> tag, but as I click "update" in the HTML editor, the snippet reappears.

Answer 1

Even though you don't have direct access to the CSS, you can still change css by using inline styles.

The way you do that is by using the style="" inside the tag you want to change the CSS styles.

The way you make the width dynamic is by using the size as percentage instead of pixels.

---

For example:

<iframe style="border: 0; width:100%; height: 500px; overflow: auto;" src="http://www.example.com"></iframe>

Notice the width:100%;, this will cause the iframe to always be 100% of the screen size. The height will always be 500px, but you can change it to whatever you like.