how to make a iframe responsive

Question

I do i make this code work without the scrollbar. and still show all the contents coming from the link in the iframe.

   <html>
      <head>
        <title>How to make Iframe Responsive</title>
          </head>
             <body>
                <div style="padding-bottom:56.25%; position:relative; display:block; width: 100%">
              <iframe width="100%" height="100%" src="https://www.inflatableoffice.com/quotes/quoteme.php name=Starwalk+of+Dallas%2C+LLC" frameborder="0" allowfullscreen="" style="position:absolute; top:0; left: 0"></iframe>
             </div>
           </body>
      </html>

I want it to display without the sidebars.

Possible duplicate of [HTML iframe - disable scroll](https://stackoverflow.com/questions/15494568/html-iframe-disable-scroll) — cyril, Dec 25 '18 at 10:32

score 1 · Answer 1 · answered Dec 25 '18 at 10:28

1

Add scrolling="no" attribute to the iframe tag.

<iframe scrolling="no" ...></iframe>

answered Dec 25 '18 at 10:28

FLUSHER

257
2
12

This removes the scroll but some of the contents are lost in the body – Onome Mine Adamu Dec 25 '18 at 10:48
Right. I don't understand what else you had in mind. – FLUSHER Dec 25 '18 at 11:27

score 0 · Answer 2 · answered Dec 25 '18 at 10:29

0

On your wrapper div, add the property overflow:hidden;. This will of course hide vertical and horizontal overflow though. You can control either one with either overflow-x:hidden; or overflow-y:hidden;. Try this:

   <html>
      <head>
        <title>How to make Iframe Responsive</title>
          </head>
             <body>
                <div style="overflow:hidden; padding-bottom:56.25%; position:relative; display:block; width: 100%">
              <iframe width="100%" height="100%" src="https://www.inflatableoffice.com/quotes/quoteme.php name=Starwalk+of+Dallas%2C+LLC" frameborder="0" allowfullscreen="" style="position:absolute; top:0; left: 0"></iframe>
             </div>
           </body>
      </html>

answered Dec 25 '18 at 10:29

Xavier

109
9

Removes the scroll but the contents in the bottom are gone – Onome Mine Adamu Dec 25 '18 at 10:49
@OnomeMineAdams as expected overflow would do. That's why I upvoted your answer :) – Xavier Dec 25 '18 at 10:51
@OnomeMineAdams however, if the OP has a specific size for the iframe and wrapper set in CSS, then this can work as a benefit in certain cases. I'm not sure if all browsers support the `scrollbar` attribute, so this approach would work better for all browsers as far as I can tell. – Xavier Dec 25 '18 at 10:55

how to make a iframe responsive

2 Answers2