html - Div Height is 0px on a Responsive Iframe -

just stuck on issue below have responsive iframe on page requires content appear beneath iframe, container thats wrapping iframe has height of 0px. i've tried clear:both & overflow:auto/hidden @ various positions neither appear work, nor adding addiitonal container around iframe..

would appreciate assistance, if knows how fix &/or improve this.

<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 needs appear beneath video</span></div> </div> 

link fiddle here: http://jsfiddle.net/ehcv0bfv/

cheers

chris

set .prodyoutube {position: relative;... rather position:absolute

share|improve answer

answered jun 19 '15 @ 5:03 sjm 2,8771231

thats embarrassing - works... heaps assitance – raym01 jun 19 '15 @ 5:16

add comment |