Div height is 0px on a responsive iframe

Question

I have a responsive iframe on a page that also requires content to appear beneath the iframe, however the container that's wrapping the iframe has a height of 0px. I've tried clear:both & overflow:auto/hidden at various positions however neither appear to work, nor does adding an additional container around the 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>

Link to my fiddle here: http://jsfiddle.net/ehcv0bfv/

Answer 1

Set .prodYoutube {position: relative;} rather than position:absolute

Answer 2

This seems to solve the issue.

.prodYoutube {position: relative;}