Css 响应列中的嵌入式视频在WebKit中消失

我一直在努力将YouTube视频与其他内容放在一个有响应性的CSS专栏中。我使用了推荐的修复程序，用于CSS技巧和其他地方的响应视频缩放。它在Firefox中运行良好，但视频在Chrome和Safari中消失。我也尝试过使用，但没有成功。有人知道如何让视频与其他内容一起正确显示在CSS列中吗？我也曾尝试与其他嵌入式非视频内容ISSU.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>

因为您使用float:left，它会打断您的响应iframe方法，因为位置设置为绝对，所以您将一无所获。你需要找到另一个解决方案，或者你对列使用另一种方法，可能是使用Jquery，因为列计数不起作用，老实说，我想不出任何纯html5+css方法可以允许自动列+响应视频