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
https://monosnap.com/file/jdAbEFIeJA1Jh0vM5ddj8jqCaXgA5n
<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
https://monosnap.com/file/ykBbdAXAKD2fU44SOLRrRZJC5NVbB6
How can I achieve this with iframe?
http://late-hill-6932.bss.design this domain has the iframe one.
@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.
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.
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.