Responsive Iframe

One time I found a WP plug-in that did a responsive iframe that fitted the height. I can’t find it again now, but it shows that it’s possible. I used it to embed faucetinabox into a WP page and it worked, looked like part of the site, no scrollbars etc. [edit: Found it again – auto iframe, but looks like it has been abandoned.] [edit: now (july 2020) upated again]

In the end, I have used <iframe src="https://solusvm.virmach.com/login.php" style="position: absolute; top:0; left: 0; width: 100%; height: 200%;"></iframe> because I still can’t find the way to just make it fit the height. I tried putting it in a position:relative; div but that produced a narrow div instead of using full page width – maybe a WP strangeness.

This worked for bittube videos:

<div class="resp-container">
    <iframe class="resp-iframe" src="https://bit.tube/playerembed/38175/QmWX8ekjUm64hfvchE6KY1zoxixaAduhqhu24778zsT793" gesture="media"  allow="encrypted-media" allowfullscreen></iframe>
</div>

css:

<style type="text/css"> 
.resp-container {
    position: relative;
    overflow: hidden;
    padding-top: 56.25%;
}
.resp-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
</style>