响应全屏html5视频

Question

我想做一个全屏响应横幅视频像https://yourkarma.com/。我让same..but成为问题，当我签入移动和选项卡视图时，reduce.so的视频高度在我的css中做了一些更改，然后我得到了结果，但是在移动和选项卡视图中丢失了视频的大部分。我如何实现类似于我的参考网站？

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; bottom:0。这需要职位:绝对的或相对的iirc。

希望这能有所帮助。