iframe没有添加到div的高度

Question

在我有iframe链接到YouTube视频的页面上：

<div class="header">
    stuff
</div>

<div class="container">
    <iframe class="youtube" src="https://www.youtube.com/embed/xxx" frameborder="0" allowfullscreen></iframe>
</div>

<div class="footer">
    stuff
</div>

然而，结果是页脚显示在youtube链接图像的下半部分，因为页面似乎无法识别iframe的实际大小。

这有什么理由和解决方案吗？