Css Div中的HTML5视频背景-需要帮助调整窗口大小吗

我一整天都在研究这个问题，但即使我用谷歌搜索，我也没有弄明白

基本上，我希望与www.tesla.com上的效果相同

视频是全尺寸的，但会根据窗口的大小调整大小，同时稍微裁剪一下，但保持视频的中心位置。在特斯拉网站上试一试，太棒了。如果它变得太小，它会显示一个图像，而不是移动设备

我正在使用GitHub页面以jekyll主题运行该网站：

我的问题：

在我的13屏幕上，视频太大，并且有一个垂直滚动条 出现。我想让它适合窗口，没有滚动条。 即使它在底部裁剪视频，也会出现溢出： 我想是吧？ 调整窗口大小时，将调整整个视频的大小。我想 它是否调整了大小，就像它种植但保留的位置一样 它居中。 我不希望视频完全是全屏的。我需要 顶部的导航栏。所以坐在沙发上更好。 你能帮忙吗

事先非常感谢你

以下是我所拥有的：

/*默认隐藏所有设备上的视频*/ 录像带{ 显示：无 } /*默认显示图像以替换所有设备上的视频*/ 视频替代{ 显示：块； 宽度：100%； 高度：自动； 最大宽度：100% } /*中型设备、台式机*/ @仅介质屏幕和最小宽度：992px{ 录像带{ 显示：块 } 视频替代{ 显示：无 } } 录像带{ 宽度：100%； 高度：360px； 位置：相对位置； } 视频块， 视频信息{ 宽度：100%； 高度：360px； 位置：绝对位置； 排名：0； 左：0； } 录像带{ 宽度：100%； } 视频信息{ 填充：0.4em； 保证金：0； } 视频信息{ 颜色：白色； z指数：99； } 视频信息h1{ 字号：3em； 颜色：ffffff； 文本对齐：居中； } 你好，世界

---

这是一个相对简单的技巧，你可以用HTML5和一些CSS

首先，您需要绝对定位视频元素，并隐藏其溢出。然后，您将使其成为页面宽度和高度的100%

接下来，您将基本上根据屏幕的纵横比拉伸视频以进行裁剪。有一个漂亮的东西叫做object-fit，你也可以把它写成object-fit：cover，它会给你同样的效果，但是IE还不支持它，所以如果你决定使用它，你需要两者

我为您提供了一个代码笔和解决方案。

下面是一个非常好的解释，说明了如何更深入地实现您所追求的目标

---

你好！非常感谢你的回答。我已经在代码中实现了。如您所见：alanlemoine.github.io/personal它工作得很好，但视频占据了整个屏幕，并在导航栏下重叠。。。有什么CSS技巧可以修复它吗？我查看了网站。看起来很棒。不知道你在问什么。您可以尝试为导航栏设置背景色，如果您觉得看不清楚，可以更改字体颜色。你也可以把上面的答案标记为已回答。谢谢。如果你在身体上加一个很好的梯度，像这样。我经常使用这个网站来快速生成css渐变。这是非常有用的。

<nav>your navigation goes here.</nav>
<div class="flexCon" >
  <div id="videoMessage">
  <h1>Hello world</h1>
  </div>
</div>
<div id="videoBg">
  <video loop muted autoplay poster="img/videoframe.jpg">
    <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
  </video>
</div>
<style>
#videoBg { position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden;}
#videoBg > video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
@media (min-aspect-ratio: 16/9) { #videoBg > video { height: 300%; top: -100%; }}
@media (max-aspect-ratio: 16/9) { #videoBg > video { width: 300%; left: -100%; }}
@supports (object-fit: cover) {#videoBg > video { top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }}

/* Demo  Classes */
nav { position:fixed; width:100%; top:0; left:0; padding:20px; background:#fff; z-index:2;}
/* Center content with flexbox container */
.flexCon { height: 100vh; display: flex; justify-content: center; align-items: center; }
/* Position the content relative to the flex container  */
#videoMessage { z-index:1; position:relative; }
</style>