css 如何使2个视频并排，居中，和响应

qcbq4gxm 于 2023-03-05 发布在其他

关注(0)|答案(2)|浏览(165)

我尝试添加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;
    }
}

先谢谢你

css

来源：https://stackoverflow.com/questions/25164219/how-to-make-2-videos-side-by-side-centered-and-responsive

2条答案

按热度按时间

lmvvr0a81#

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

- 超文本标记语言**

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

- 中央支助组**

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

赞(0）回复(0）举报 2023-03-05

fsi0uk1n2#

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

赞(0）回复(0）举报 2023-03-05

我来回答

css 如何使2个视频并排，居中，和响应

2条答案

相关问题

热门标签

最新问答