Html 在响应iframe上，Div高度为0px

我在页面上有一个响应iframe，它也要求内容显示在iframe下面，但是包装iframe的容器的高度为0px。我在不同的位置尝试了

clear:both

&

overflow:auto

/

hidden

，但是似乎都不起作用，也没有在iframe周围添加额外的容器

<style type="text/css"><!--
.article {width:100%;}
.article img {width: 100%;display: block;}
.category-banner {margin-bottom:20px;}
.category-banner img {width:100%;display:block;}
.video-wrapper {margin: 0 auto;display: block;width: 80%;position: relative;}
.prodYoutube {position: absolute;border-radius: 6px;border: 6px solid #000;box-sizing: border-box;width: 100%;height: 0;overflow: hidden;padding-bottom: 57%;margin-top: 10px;}
.mobile-video-player img {float:left;}
.prodYoutube iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.mobile-image {display:block !important;}
.mobile-video-player {display:none;}
--></style>


<div class="Article">
<div class="mobile-image"><img class="#" src="https://www.google.com.au//images/srpr/logo11w.png" alt="Mobile Test 2" border="0"></div>
<div class="video-wrapper">
<div class="prodYoutube"><iframe allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/-YGDyPAwQz0?rel=0&amp;showinfo=0&amp;autohide=1"></iframe></div>
</div>

<div class="section-2"><span>Text That needs to appear beneath the Video</span></div>
</div>

需要显示在视频下方的文本

---

这里链接到我的小提琴：

设置

.prodYoutube{position:relative；}

而不是

位置：绝对

这似乎解决了问题

.prodYoutube {position: relative;}