全屏HTML5无JS视频背景

Question

我想在我的网站上创建一个全屏视频背景，理想情况下只使用HTML和CSS。我还需要将视频背景粘贴到页面的顶部，因此用户的第一个视图完全被视频覆盖，然后他们可以向下滚动并移动视频。

我需要视频响应并保持宽高比。但是，为了避免黑条，我希望视频能够填充其中任何尺寸（宽度或高度）最小的100％，然后将视频溢出其他尺寸。

这是我的解决方案至今...

<div class="container-fluid adjustedHeight"> 
    <div class="video-container"> 
    <div class="row"> 
     <div class="col-md-12"></div> 
    </div> 
    <div class="row Page1"> 
     <div class="col-md-6 button1"> 
     <button type="button" class="btn btn-primary btn-lg outline">Pre-Order</button> 
     </div> 
     <div class="col-md-6 button2"> 
     <button type="button" class="btn btn-primary btn-lg outline">About Us</button> 
     </div> 
    </div> 
    <video autoplay loop class="fillWidth"> 
     <source src="Images/Comp 2.mp4" type="video/mp4" /> 
     Your browser does not support the video tag. I suggest you upgrade your browser.</video> 
    <div class="poster hidden"> <img src="http://www.videojs.com/img/poster.jpg" alt=""> </div> 
    </div> 
</div> 

CSS：

.video-container { 
    position: relative; 
    bottom: 0%; 
    left: -15px; 
    height: 100% !important; 
    width: 100vw; 
    overflow: hidden; 
    background: #000; 
    display: block !important; 
} 

.video-container video { 
    position: absolute; 
    z-index: 0; 
    bottom: 0; 
} 

.video-container video.fillWidth { 
    min-width: 100%; 
    min-height: 100%; 
} 

它适用于宽度，但我得到的黑条，如果高度过大，视频，即宽度不会溢出。我如何定义这个以确保宽度和高度至少100％填充？我认为min-height和min-width属性会这样做，但这会将高度和宽度都调整到100％以上，并且在调整大小时，视频不会缩放，只会截断更多视频的宽度（并且不会保留视频中心）。而如果我只使用.video-container video.fillWidth CSS属性中的宽度和高度定义，我确实获得了视频集中，但是我得到了黑条。

这是一个JSFiddle它目前显示当高宽比与视口比率不同时，黑条出现在上方和下方（也在左侧和右侧，但很难看到）。

注意：我使用引导程序3，我的adjustedheight属性允许导航栏的空间。

编辑：

要回答的关闭请求，该链接的问题已经回答了需要JS，我不想使用。

感谢您的帮助，我真的很想要得到一项决议，这是似乎基于什么我的代码应该这样做是有道理的不 - 不知道我要去的地方错了...

有没有人有任何想法？由于我JSFiddle一切似乎已经安静...

Answer 1

我不确定我是否完全满足您的要求，但在我看来您正在寻找object-fit属性，其值为cover。

从MDN：

盖
被替换的内容的尺寸却使元件的整个内容框，以保持其高宽比：其具体的对象大小是 解决作为对元件的盖约束使用宽度和 高度。

html, 
 
body, 
 
div.video-container, 
 
video 
 
{ 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
} 
 

 
video{ 
 
    height: 100%; 
 
    width: 100%; 
 
    object-fit : cover; 
 
} 
 

 
.video-container { 
 
    overflow: hidden; 
 
    background: #000; 
 
    display: block !important; 
 
    position: relative; 
 
} 
 

 
.video-container video { 
 
    position: absolute; 
 
    z-index: 0; 
 
    bottom: 0; 
 
} 
 

 
.title-container { 
 
    z-index: 10; 
 
    color: #FFF; 
 
    position: absolute; 
 
} 
 

 
.adjustedHeight { 
 
    height: calc(100% - 77px); 
 
    width: 100%; 
 
    padding: 0; 
 
}

<div class="container-fluid adjustedHeight"> 
 
    <div class="video-container"> 
 
    <div class="row"> 
 
     <div class="col-md-12"></div> 
 
    </div> 
 
    <div class="row Page1"> 
 
    </div> 
 
    <video autoplay loop class="fillWidth"> 
 
     <source src="http://dfcb.github.io/BigVideo.js/vids/dock.mp4" type="video/mp4" /> Your browser does not support the video tag. I suggest you upgrade your browser.</video> 
 
    <div class="poster hidden"> <img src="http://www.videojs.com/img/poster.jpg" alt=""> </div> 
 
    </div> 
 
</div>

Answer 2

我相信min-width和min-height均设定为100％，是要走的正确方法，但所有家长的height S还必须按顺序设置为100％为它工作。

html, body, div.container-fluid, div.video-container { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
    overflow: hidden; 
 
} 
 
video, source { 
 
    min-height: 100%; 
 
    min-width: 100%; 
 
}

<div class="container-fluid adjustedHeight"> 
 
    <div class="video-container"> 
 
    <video autoplay loop class="fillWidth"> 
 
     <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" /> 
 
     Your browser does not support the video tag. I suggest you upgrade your browser.</video> 
 
</div>

Answer 3

我不知道，如果你问全屏w.r.t.浏览器窗口本身或全屏作为整个显示器，但如果是前者，我认为 以下后可能会帮助您解决问题：

http://slicejack.com/creating-a-fullscreen-html5-video-background-with-css/

Answer 4

可能的，这将与工作

.video-container{ 
width:100vw; 
height:100vh; 
} 

其中，vw是视口宽度，vh是视口高度。