无 JS 的全屏 HTML5 视频背景

Posted 2023-05-07

【中文标题】无 JS 的全屏 HTML5 视频背景

【英文标题】：Full Screen HTML5 Video Background without JS

【发布时间】：2016-04-29 05:04:42

【问题描述】：

我想在我的网站上创建一个全屏视频背景，最好只使用 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" > </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 放入正文标签并使用 * margin = 0;填充=0；

Can you display HTML5 <video> as a full screen background?的可能重复

@Rob 这些似乎主要包括 JS ？

@Lakshya 恐怕没有帮助 - 我会发布一个 JSFiddle

@GeorgeEdwards 您如何期望较小长度的溢出以保持比率不变？如果宽度达到 100vw，并且视频的比例为 16:9，您希望 9 部分溢出吗？如果是这样，那么宽度将必须超过 100vw。如果那是您真正想要的，我相信那将是background-size: clip。

【参考方案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" > </div>
  </div>
</div>

【参考方案2】：

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

【参考方案3】：

我不确定您是否要求全屏 w.r.t.浏览器窗口本身或整个显示器中的全屏，但如果是前者，我认为 以下帖子可能会帮助您解决问题：

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

【讨论】：

这似乎是整个页面的背景，我希望能够滚动过去我的视频，即背景只到我的页面的一部分，与视口大小相同。跨度>

【参考方案4】：

这可能会奏效-

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

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

【讨论】：

我对视频容器没有任何问题，它可以动态调整视频大小，同时保持导致问题的纵横比。我似乎无法定义视频来填充宽度和高度，同时让任何需要的尺寸溢出。