# How to automatically adjust iframe height for embedded wordpress posts

**URL:** https://meta.discourse.org/t/how-to-automatically-adjust-iframe-height-for-embedded-wordpress-posts/127686
**Category:** WordPress
**Created:** [September 5, 2019, 1:06pm UTC](https://meta.discourse.org/t/how-to-automatically-adjust-iframe-height-for-embedded-wordpress-posts/127686 "2019-09-05T13:06:06Z")
**Posts on this page:** 1
**Showing post:** 7

<div class="post-metadata">

### Author: ![jimkleiber](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jimkleiber/32/121814_2.png) [@jimkleiber](https://meta.discourse.org/u/jimkleiber)
#### Post date: [April 3, 2024, 12:26am UTC](https://meta.discourse.org/t/how-to-automatically-adjust-iframe-height-for-embedded-wordpress-posts/127686/7 "2024-04-03T00:26:30Z")

</div>

Ugh, I got it to work. The problem was that I was using a custom class on the iframe tag and Discourse strips all those tags. I should have learned my lesson from a few days ago ([Formatting posts to look more like Wordpress blog - #6 by jimkleiber](https://meta.discourse.org/t/formatting-posts-to-look-more-like-wordpress-blog/301133/6)). I’ve read that it’s a security reason for why custom HTML classes don’t work here but I’m not sure why 😕

However, here’s the code for adjusting the height of an iframe with the `.topic-body iframe` selector (not sure if this code works for others, seems to work for me):

```js
<script type="text/discourse-plugin" version="0.8.18">
    api.decorateCookedElement(
      element => {
        setTimeout(function() {
          let iframes = element.querySelectorAll('.topic-body iframe');
          if (iframes) {
            iframes.forEach(function(iframe) {
              iframe.onload = function() {
                let iframeDocument = this.contentDocument || this.contentWindow.document;
                let contentHeight = Math.max(
                  iframeDocument.body.scrollHeight,
                  iframeDocument.documentElement.scrollHeight
                ) + 'px';
                this.style.height = contentHeight;
              };
            });
          }
        }, 5000); // Adjust the delay as needed                  
      },
      { id: "component-id", onlyStream: true}
    );
</script>

```

EDIT: actually, it doesn’t work. I added `height="4000px"` in the iframe tag and that’s why it was working, I think.

---

_[View the full topic](https://meta.discourse.org/t/how-to-automatically-adjust-iframe-height-for-embedded-wordpress-posts/127686)._