Question

我在页面上有一个响应式iframe，它还要求内容显示在iframe下面，但是包装iframe的容器的高度为0px。我试过clear:both＆amp; 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>

链接到我的小提琴：http://jsfiddle.net/ehcv0bfv/

Answer 1

设置.prodYoutube {position: relative;}而不是position:absolute

Answer 2

这似乎解决了这个问题。

.prodYoutube {position: relative;}

在响应式iframe上Div高度为0px

2 个答案: