如何制作 2 个并排、居中和响应式的视频答案

【问题标题】：How to make 2 videos side by side, centered, and responsive如何制作 2 个并排、居中和响应式的视频
【发布时间】：2022-03-04 10:04:45
【问题描述】：

我正在尝试并排添加 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;
    }
}

提前谢谢你

【问题讨论】：

你有没有尝试在你的媒体查询中添加一些东西来移除浮动并最大化宽度——比如，wrapper div { width: 100%;浮动：无； } 编辑：你实际上需要更具体，因为你在 div 上使用 #'s 所以 #home1, #home2 { width: 100%;浮动：无； }
codepen.io/evanrbriggs/pen/pwkHj
效果很好，@Evan

标签： css html responsive-design joomla3.0

【解决方案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;
    }
}

【讨论】：

杰斐逊非常感谢您提供的信息！我已经对其进行了测试，它在移动网站上正确显示，视频在彼此下方，但在桌面视图中却没有。在桌面视图中发生的情况是，当它们应该并排/相邻时，视频也在彼此下方。
在媒体查询中 (max-width: 767px) 尝试将最大宽度调整为您想要的屏幕尺寸，我认为 500px 是一个不错的数字。因此，宽度大于 500 像素的屏幕将不会出现彼此下方的视频。

【解决方案2】：

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

【讨论】：