Responsive Iframe

Problem with https://clickforcharity.net/one-mans-dream-to-revive-indigenous-forest/

  • Iframe works on this site – see below (404 but iframe is working) – (2023) Updated to embed an Odysee video. Just take the link from the iframe embed code under the share menu.
  • works in preview on clickforcharity.net
  • doesn’t work when viewing the page.
  • WordPress deletes the iframe when updating so it is gone next time you look in the editor. No reason or indication at all.
[Solved it though… When I do it as admin and not author, it works. Bit of a nuisance, if we want to move away from the dinosaur video platforms.
Solved with yet another plugin – User Role Editor.

Below is now redundant, but leaving it for reference.

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, for satoshihost VMs 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>