How to create a resizable <iframe>?

Since directly adding resize:both to the <iframe> doesn't work, we have to use a "hack".

Since width:100% and height:100% will take up all the available space of the parent, we can indirectly make the <iframe> resizable.

Start with a <div>, wrap it around the <iframe>, then give that <div> the css:

    height: ?;
  width: ?;
  /*Replace the question marks with your own values*/
  overflow-x: auto;
  overflow-y: hidden;
  resize:both;

Why is overflow used? Because it is nessescary for the resize to work. If you don't belive me, you can try messing around with a working example here. Why is overflow-y hidden? Well, to prevent double horizontal scrollbars which just look bad. Next, now comes the trick, give your <iframe> the css:

    width:100%;
  height:100%;
  border:none;

border:none is added to the <iframe> for the nice look, and simplicity.

And it's that simple.

Demo

**TIP: with <iframes> you should use // instead of http:// or https:// for the src value. Example: //example.com instead of http://example.com.

Last updated: Sept. 16, 2017.

If you have any problems/questions, please ask them in the comments section. Have fun coding!


3,511 0 1