I have a code that dynamically loads iframes in div.

So here on this page, I embedded 4 common scenarios: https://webmoosh.com/broadcast.html

Since the content is different, they could all have different heights.

For some reason, it adds extra height in some situations.

In the example, The top fixed one is ok, however, the other 3 have issues.

The timer with blue font and the one with white font have some extra gap under.

And the bottom fixed one has extra height on iPhone.

What are the right ways of doing this do the height of the div containing the iframe, and the iframe itself be correct?

I've done everything by the book.