css - 响应列中的嵌入视频在 WebKit 中消失

Question

我一直在努力将 YouTube 视频与其他内容放在响应式 CSS 列中。我已经使用了 CSS Tricks 和其他地方推荐的响应式视频缩放修复程序。它在 Firefox 中运行良好，但视频在 Chrome 和 Safari 中消失了。我也尝试过使用 http://fitvidsjs.com但没有成功。有谁知道让视频与其他内容一起正确显示在 CSS 列中的方法吗？我也曾尝试使用其他嵌入式非视频内容(Issuu.com 出版物)，但遇到了同样的问题。

这是 CSS 和 HTML:

#content {
margin-left: auto;
margin-right: auto;
width: 100%;
overflow: hidden;
*zoom: 1;
overflow: hidden;
position: relative;
}

#content .content-columns {
display: inline;
float: left;
margin-left: 5%;
margin-right: 5%;
width: 90%;
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
-moz-column-rule: 1px solid #ECECFB;
-webkit-column-rule: 1px solid #ECECFB;
column-rule: 1px solid #ECECFB;
-moz-column-gap: 26px;
-webkit-column-gap: 26px;
column-gap: 26px;
}

.mod-embed-video{
position: relative;
padding-bottom: 56.25%;
padding-top: 35px;
height: 0;
overflow: hidden;
}

.mod-embed-video iframe, .mod-embed-video object, .mod-embed-video embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

<div id="content"> 
 <div class="content-columns">
  <p>Lorem ipsum dolor sit amet, quodsi salutandi at mel, dicam accusamus ut mel. Tation omittam singulis nec no. Ea mea ludus corpora efficiendi. Vel id nihil legendos pertinacia, prima vocibus ut usu. Omnis delicata ut sea, lorem philosophia ex eos, an elit accommodare quo.</p>
  <p>Et vim vero assum error. Sumo tantas an sit, magna dicta an mel, ut wisi feugait consequat eum. An ius recteque dignissim assueverit. Ius homero populo expetenda te, an sit amet possit pertinacia. Sed aeterno perpetua ea. Eam cu ullum dicta, commodo appareat id pro.</p>
  <p>Mea cu commodo aeterno labitur, ius dolorem intellegat disputando ea, cum eros harum no. Errem principes delicatissimi in vel. Evertitur forensibus eu sea, te has eirmod tractatos consetetur. Te has vitae mandamus suscipiantur, duo labores mentitum principes eu.</p>
  <p>Ad elitr vocibus vim, agam oportere est et, his eu elit facilisi tacimates. Soleat torquatos deterruisset mel ut, in tollit ocurreret his, vis et nulla epicurei vituperata. Tation euismod accusam sea in, sed modo dico ut. Pri ignota putant iudicabit ex.</p>
  <p>Et vim vero assum error. Sumo tantas an sit, magna dicta an mel, ut wisi feugait consequat eum. An ius recteque dignissim assueverit. Ius homero populo expetenda te, an sit amet possit pertinacia. Sed aeterno perpetua ea. Eam cu ullum dicta, commodo appareat id pro.</p>
  <div class="mod-embed-video">
   <iframe width="550" height="309" src="//www.youtube.com/embed/9-5MVFMWSh0?rel=0" frameborder="0" allowfullscreen></iframe>
  </div>
  <p>Et vim vero assum error. Sumo tantas an sit, magna dicta an mel, ut wisi feugait consequat eum. An ius recteque dignissim assueverit. Ius homero populo expetenda te, an sit amet possit pertinacia. Sed aeterno perpetua ea. Eam cu ullum dicta, commodo appareat id pro.</p>
 </div>
</div>

Answer 1

因为您使用 float:left 并且它打破了您的响应式 iframe 方法，因为位置设置为绝对，因此您什么也得不到。您需要找到另一种解决方案，要么对列使用另一种方法，可能使用 Jquery，因为列计数不起作用，老实说，我想不出任何允许自动列 + 响应式视频的纯 html5+css 方法