Question

我正在尝试并排添加2个视频，这些视频中心并且间隔正确，然后想要让第二个视频在第一个视频下方显示响应，以便它可以叠加在移动设备上。我正在使用的Html是：

<div id="wrapper"> 
  <div id="home1">
   <video width="400" height="300" poster="images/video.jpg" controls="controls" preload="none"> 
     <source type="video/mp4" src="images/stories/home1.mp4" /> 
   </video>
  </div>
  <div id="home2">
   <video width="400" height="300" poster="images/video.jpg" controls="controls" preload="none"> 
     <source type="video/mp4" src="images/stories/home2.mp4" /> 
   </video>
  </div> 
</div>

到目前为止，我的css是：

#wrapper { 
    width: 920px; 
    height: 350px; 
    margin: 0 auto; 
} 

#home1 { 
    width: 400px; 
    height: 300px; 
    float: left; 
} 

#home2 { 
    width: 400px; 
    height: 300px; 
    float: right; 
}

@media (max-width:767px) {
    .home1 {
        position: relative;
        padding-bottom: 56.25%; /* 16/9 ratio */
        padding-top: 30px; /* IE6 workaround*/
        height: 0;
        overflow: hidden;
    }
    .home2 {
        margin-left: 0;
    }
}

提前感谢你

Answer 1

我在你的html和css中做了一些修改，自己测试一下。

<强> HTML

<div id="wrapper"> 
    <video id="home1" width="400" height="300" poster="images/video.jpg" controls="controls" preload="none"> 
        <source type="video/mp4" src="images/stories/home1.mp4" /> 
    </video>
    <video id="home2" width="400" height="300" poster="images/video.jpg" controls="controls" preload="none"> 
        <source type="video/mp4" src="images/stories/home2.mp4" /> 
    </video>
    <div class="clear"></div> 
</div>

<强> CSS

#wrapper { 
    width: 920px; 
    height: auto; 
    margin: 0 auto;
} 
#home1 { 
    width: 47.5%; 
    height: 300px; 
    float: left; 
    margin-right: 5%;
} 

#home2 { 
    width: 47.5%; 
    height: 300px; 
    float: left; 
}

.clear{
    clear: both;
}

@media (max-width:767px) {
    #wrapper{
        width: 100%;
        height: auto;
    }
    #home1 {
        width: 100%;
        height: auto;
        float: none;
    }
    #home2 {
        width: 100%;
        height: auto;
        float: none;
    }
}

Answer 2

您是否尝试在媒体查询中添加内容以删除浮动并最大化宽度？编辑：您可能实际上需要更具体，因为您在div上使用＃，所以#home1, #home2 { width: 100%; float: none; } - 例如http://codepen.io/evanrbriggs/pen/pwkHj

如何制作2个视频并排，居中和响应

2 个答案: