How to set auto height for iframe and its content inside of it?

My slider is coming from another server as an Iframe(wordpress revolution slider but extracted as html and ready to use). If I locally save it to my server as slider.php and call it with php include, the slider area is working just fine when you resize the browser. This is included in the same server with php include

<hr />

But if I put an iframe to slider area, when you resize, the iframe height is always same. This is the one with iframe

How can I achieve this with iframe? this domain has the iframe one.

Please help, thanks.

@kakaoskisilk, you should be able to use media queries to change the height of the iframe. Otherwise, you would have to use JavaScript to monitor the viewport size and when it changes and have it adjust the iframe height.


A slideshow embedded as an iframe. Very kludgy.

Nevertheless, just add something like height: 32vw; to your styling of the iframe. You might have to play with the number a bit to get it just right.

Hi, Yes but I had to write media queries starting from 1920px until 300px....

How can I do it with Javascript? I dont really have enought knowledge of javascript..

The CSS viewport width value doesn't care about media queries. Just add height: 32vw; to your iframe and resize your browser window. I did this to your site and it worked perfectly.

Wow! Omg thank you! How is this happening?


In CSS, vw stands for "viewport width." The number in front of vw is relative to 1% of the viewport width. You can use the viewport width unit to scale most anything that can normally be scaled with pixels, percentages, rems, ems, points, etc. For example, using vw, you could have your type size scale smoothly depending on the screen width as opposed to setting different sizes at different breakpoints. There is also vmax and vmin, in case you don't want something to get too big or too small.

Study CSS like your life depends on it lol.

Thank you man! I will definetely look at it. Learning everyday! You're a life saver.