编辑：

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当前显示当纵横比与视口比不同时，黑条会出现在上方和下方（也在左侧和右侧，但很难看到）。

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

编辑：

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

感谢您的帮助，我真的很想得到一个解决方案，因为根据我的代码应该做什么似乎没有意义 - 不确定我哪里出错......

有没有人有任何想法？因为我的JSFiddle一切似乎都变得安静了......

Answer 1

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

来自mdn：

<强>盖
替换内容的大小可以在填充元素的整个内容框时保持其宽高比：其具体对象大小为解析为元素使用宽度的封面约束高度。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

我相信public class RootObject { public RootObject() { this.data = new SortedDictionary<long, DataValue>(); } public SortedDictionary<long, DataValue> data { get; set; } }和min-width都设置为100％是正确的方法，但所有父min-height也必须设置为100％才能它起作用。

＆＃13;

height

＆＃13;

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

＆＃13;

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是视口高度。

没有JS的全屏HTML5视频背景

编辑：

4 个答案: