没有JS的全屏HTML5视频背景 [英] Full Screen HTML5 Video Background without JS

问题描述

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

I would like to create a full-screen video background on my website, ideally using only HTML and CSS. I also need the video background to be stuck to the top of the page, so the users first view is entirely covered by the video and then they can scroll down and move past the video.

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

I need the video to be responsive and preserve the aspect ratio. However, to avoid black bars, I would like the video to fill 100% of which ever dimension (width or height) is the smallest, and then overflow the video for the other dimension.

这是我到目前为止的解决方案......

This is my solution so far...

<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属性中的宽度和高度定义，我会集中获取视频，但是我会得到黑条。

It works for the width, but I get black bars if the height is too big for the video, i.e. the width won't overspill. How can I define this to ensure that both the width and height are at least 100% filled? I thought the min-height and min-width attributes would have done this, but this scales both height and width beyond 100% and when I resize, the video doesn't scale, it just cuts off more of the video's width (and doesn't keep the video central). Whereas, if I just use the width and height definitions in the .video-container video.fillWidth CSS attribute, I do get the video centrally, but I get black bars.

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

Here is a JSFiddle It currently shows that black bars are appearing above and below (also on the left and right, although this is hard to see) when the aspect ratio is different to the viewport ratio.

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

NB: I am using bootstrap 3 and my adjustedheight attribute allows space for the navbar.

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

To answer the close requests, the linked question has answered which require JS, which I don't want to use.

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

Thanks for your help, I would really love to get a resolution to this as it doesn't seem to make sense based on what my code should be doing - not sure where I am going wrong...

有没有人有任何想法？自从我的 JSFiddle 以来，一切似乎都变得安静了......

Does anyone have any thoughts? Since my JSFiddle everything seems to have gone quiet...

推荐答案

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

I am not sure I totally got your requirements, but it sounds to me that you are looking for the object-fit attribute, with the value cover.

来自mdn：

封面

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

cover
The replaced content is sized to maintain its aspect ratio while filling the element’s entire content box: its concrete object size is resolved as a cover constraint against the element’s used width and height.

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>

这篇关于没有JS的全屏HTML5视频背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！