Iframe creates extra space below

Question

Why does an iframe add extra space under its element? Look at this weird behavior:

Answer 1

The other answers worked for me when designing for just mobile or just desktop, but when the padding-bottom would have been different based on the size of the screen, it did not work.

What does work is using Viewport Height.

I added these to my CSS and it resolved the issue in all resolutions.

.resp-iframe 
{
    height: 100vh;
    min-height: 800px;
}