响应性全屏幕html5视频

我想做一个全屏响应的横幅视频像。我也这么做了。但问题是，当我在手机和tab view中签入时，视频高度会降低。我的css中也做了一些更改，然后我得到了结果，但在手机和tab view中丢失了大部分视频。我如何实现类似于我的参考网站

css

---

html

您的浏览器不支持视频标记。

我认为你应该省去高度：100%。 如果您希望它具有响应性并使用屏幕的全高，请使用

top:0；底部：0

。 这需要位置：绝对或相对iirc

---

希望这有帮助。

为什么不使用媒体查询？使用媒体查询..但如何实现媒体查询？？？在移动和选项卡视图中，我需要全屏视频。你是说媒体查询不起作用，还是说你不知道如何使其适合媒体查询？我是说视频不适合小尺寸设备…视频中看不到人，这是演示链接：视频不适合小尺寸设备，bcoz我给宽度：自动和溢出隐藏…否则当屏幕缩小时视频高度会降低..是否有扭曲视频的选项？.这是演示链接：。好的，所以问题不是它没有填满屏幕。对于不同的可视范围使用不同的视频怎么样？比如在桌面视图中使用较大的视频，但在较小的设备上使用为手机设计的视频？否则，如果您将视频缩小并使用全高，视频将变得倾斜。抱歉…我们可以使用不同的视频…只有一个视频是可能的…有没有任何选项可以实现？嗯，对于小型设备，您可以将视频推到更左侧。这会让人看得见。试过了，左边空白处是负数。这样视频就会向左移动。这可以让你看到说话的人。但问题是，你无法阅读视频结尾的文字。所以这也不是一个好方法。我认为，如果你想让整个视频可见，你就必须对其进行缩放。这将使它使用较少的高度，但至少你没有遗漏任何内容。我能想到的其他atm解决方案要么是扭曲视频，要么是把一些东西放在看不见的地方。。。

.main_banner{
    width:100%;
    top:0px;
    height:100%;
    float:left;
    position:absolute;
    left:0;
    overflow:hidden;
    background-color:#141517;   
}
.main_banner video{
    width:auto;
}

<section class="main_banner">
        <video autoplay loop preload>
          <source src="videos/Meet_Eric_at_Aditi_Staffing_MP4.mp4" type="video/mp4">
          <source src="videos/Meet_Eric_at_Aditi_Staffing_Ogv.ogv" type="video/ogg">
          <source src="videos/Meet_Eric_at_Aditi_Staffing_Webm.webm" type="video/webm">
          Your browser does not support the video tag.
        </video>
    </section>