logo标签列表

不使用JS实现全屏HTML5视频背景

csshtmlvideo
4
我想在我的网站上创建一个全屏视频背景，最好只使用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之后，一切都变得很安静...
尝试将您的“video-container”放在body标签中，并使用
  • { margin = 0; padding = 0; }
 - Lakshya
1
可能是重复的问题：你能将 HTML5 的 <video> 显示为全屏背景吗？ - Rob
@Rob 这些似乎主要包括 JS？ - George Edwards
@Lakshya 很抱歉，那并没有帮助 - 我会发布一个JSFiddle。 - George Edwards
@GeorgeEdwards，你如何期望较小长度的溢出来保持比例不变？如果宽度达到100vw，并且视频的比例为16:9，你希望9部分溢出吗？如果是这样，那么宽度就必须超过100vw。如果这正是你想要的，我相信这将是background-size: clip。 - zer00ne
4个回答
4
我不确定我完全理解你的要求，但我认为你正在寻找具有值cover的object-fit属性。
来自mdn:

cover
替代内容的大小会保持其宽高比并填充整个元素的内容框：其具体对象大小将根据元素使用的宽度和高度进行覆盖约束。

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>

1

我认为将min-width和min-height都设置为100%是正确的方法，但所有父元素的height也必须设置为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>

我担心这似乎没有起作用 - 我仍然看到黑色的条纹 - 我会发布一个JSFiddle。 - George Edwards
0

可能这会起作用 -

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

其中vw代表视口宽度，vh代表视口高度。

我在视频容器方面没有任何问题，问题出在动态调整视频大小并保持纵横比。我似乎无法定义视频以填充宽度和高度，同时让需要溢出的维度溢出。 - George Edwards
0
这似乎是整个页面的背景，我希望能够滚动到我的视频之后，即仅限于页面中与视口大小相同的一个部分，而不是整个背景。 - George Edwards
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接