css - 如何并排、居中和响应式制作 2 个视频

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;
    }
}