html - 响应式全屏 html5 视频

Question

我想制作一个全屏响应式横幅视频，例如 https://yourkarma.com/ .我做同样的..但问题是当我检查移动和选项卡 View 时视频高度会减少。所以我的 css 做了一些更改，然后我得到了结果但在移动和选项卡 View 中丢失了视频的主要部分.我怎样才能实现与我的引用网站相似的效果？

CSS

---

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

html

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

Answer 1

我认为您应该省略 height:100%。如果您希望它响应并使用屏幕的整个高度，请使用 top:0;底部:0。这需要 position:absolute 或 relative iirc。

希望这对您有所帮助。