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方法，因为position设置为绝对值，因此您什么也得不到。您需要找到另一种解决方案，其中您使用另一种方法来使用列，可能使用Jquery，因为列数不起作用，老实说，我想不出任何纯粹的html5 + css方法，它将允许自动列+响应视频

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

1 个答案: