Javascript 如何让视频占据视口的高度和宽度？

我想让我的网站播放一段占据整个视窗的视频。不是身体的100%，只是视口。因此，您可以向下滚动并查看其他内容。与mediaboom.com的做法类似

我已经设法使视频占据了整个视口，而不是更多，这就是我的目标。但它没有反应。这意味着调整窗口大小时，视频应保持居中。但是它被切断了

以下是迄今为止我对html的了解：

<div id="featured">
        <video poster="assets/poster.jpg" autoplay="true" muted="true" loop>
            <source src="assets/home.mp4" type="video/mp4" />
        </video>
</div>

与对象匹配：contain/cover不同，此选项也适用于IE/Edge

如注释中所述，要模拟包含，请改用“最大宽度/最大高度”。 还要注意，加载示例视频需要几秒钟

模拟对象匹配的示例：封面

html，正文{ 保证金：0； } 包装纸{ 位置：相对位置； 高度：100vh； 溢出：隐藏； } 特色{ 位置：绝对位置； 宽度：calc100vh*1000/562；/*视频宽度/高度*/ 高度：calc100vw*562/1000；/*视频高度/宽度*/ 最小宽度：100%； 最小高度：100%； 最高：50%； 左：50%； 转化：转化-50%，-50%； } 录像带{ 位置：绝对位置； 排名：0； 左：0； 宽度：100%； 身高：100%； } 与对象匹配：contain/cover不同，此选项也适用于IE/Edge

如注释中所述，要模拟包含，请改用“最大宽度/最大高度”。 还要注意，加载示例视频需要几秒钟

模拟对象匹配的示例：封面

html，正文{ 保证金：0； } 包装纸{ 位置：相对位置； 高度：100vh； 溢出：隐藏； } 特色{ 位置：绝对位置； 宽度：calc100vh*1000/562；/*视频宽度/高度*/ 高度：calc100vw*562/1000；/*视频高度/宽度*/ 最小宽度：100%； 最小高度：100%； 最高：50%； 左：50%； 转化：转化-50%，-50%； } 录像带{ 位置：绝对位置； 排名：0； 左：0； 宽度：100%； 身高：100%； }

---

您可以在CSS中使用objectfit:cover，唯一的问题是没有IE支持。它实际上与背景大小相同：不过是封面！

---

您可以在CSS中使用object fit:cover，唯一的问题是没有IE支持。它实际上与背景大小相同：不过是封面！

---

我不确定是否正确回答了您的问题，但我尝试了您的代码更改最小宽度：100%；最小高度：100%；宽度：100%；身高：100%；并且窗口的大小正确调整

编辑：

很抱歉，我不知道在mediaboom.com的什么地方可以找到，那里有很多东西

但如果你想：

以保持视频的纵横比。 将视频设置为视口允许的高度。 如有必要，裁剪视频的宽度，但保持视频居中 在video div下添加更多元素，您可以通过滚动来访问这些元素 那就试试这个。如果这不是解决方案，它可能会让您更接近：

body, html {
            margin: 0px;
            padding: 0px;
            width: 100%;
        }

        #featured {
            width: 100wh;
            height: 100vh;
            position: relative;
        }


        video {
            width:100wh;
            height: 100Vh;
            display:inline-block;
            position: absolute;
            top:50%;
            left:50%;
            margin-right: -50%;
            transform: translate(-50%,-50%);
        }

---

我不确定我是否正确回答了您的问题，但我尝试了更改最小宽度的代码：100%；最小高度：100%；宽度：100%；身高：100%；并且窗口的大小正确调整

编辑：

很抱歉，我不知道在mediaboom.com的什么地方可以找到，那里有很多东西

但如果你想：

以保持视频的纵横比。 将视频设置为视口允许的高度。 如有必要，裁剪视频的宽度，但保持视频居中 在video div下添加更多元素，您可以通过滚动来访问这些元素 那就试试这个。如果这不是解决方案，它可能会让您更接近：

body, html {
            margin: 0px;
            padding: 0px;
            width: 100%;
        }

        #featured {
            width: 100wh;
            height: 100vh;
            position: relative;
        }


        video {
            width:100wh;
            height: 100Vh;
            display:inline-block;
            position: absolute;
            top:50%;
            left:50%;
            margin-right: -50%;
            transform: translate(-50%,-50%);
        }

---

这不管用。视频占用整个视口高度，但不占用宽度。使用最大高度：100vh用于特色div作品。但对于较小的屏幕，视频不会占据整个视口的高度。我需要它从侧面放出视频并始终保持居中。@Rasheddha:那么，当视频的纵横比与视口纵横比不匹配时，该如何裁剪/拉伸视频？是的，视频将被裁剪。但各方都是平等的。因此，您看到的裁剪部分始终是尺寸100%宽度和100vh范围内的中心部分。编辑：我刚刚注意到你的编辑版本，在这种情况下，视频不会占据100%的宽度。对象匹配：虽然封面看起来很有用。@Rasheddha用跨浏览器解决方案更新了我的答案。它有效！！太棒了，这正是我想要的。而且它也适用于Edge和IE。非常感谢。但是你能解释一下你是如何计算宽度和高度的吗？值1000和562是否需要替换为视频的实际宽度和高度？这不起作用。视频占用整个视口高度，但不占用宽度。使用最大高度：100vh用于特色div作品。但对于较小的屏幕，视频不会占据整个视口的高度。我需要它从侧面放出视频并始终保持居中。@Rasheddha:那么，当视频的纵横比与vi不匹配时，该如何裁剪/拉伸视频呢

---

ewports纵横比？是，视频将被裁剪。但各方都是平等的。因此，您看到的裁剪部分始终是尺寸100%宽度和100vh范围内的中心部分。编辑：我刚刚注意到你的编辑版本，在这种情况下，视频不会占据100%的宽度。对象匹配：虽然封面看起来很有用。@Rasheddha用跨浏览器解决方案更新了我的答案。它有效！！太棒了，这正是我想要的。而且它也适用于Edge和IE。非常感谢。但是你能解释一下你是如何计算宽度和高度的吗？值1000和562是否需要用视频的实际宽度和高度替换？啊，是的，这很好。我知道对象匹配，但没有意识到它可以解决这个问题。谢谢啊，是的，效果很好。我知道对象匹配，但没有意识到它可以解决这个问题。谢谢是的，它会调整大小，但我需要图像始终占据视口高度。在您的情况下调整浏览器大小时，它会通过收缩高度和宽度来保持纵横比。但它应该裁剪宽度，并保持高度恒定在100vh。查看mediaboom.com以获取参考。是的，它会调整大小，但我需要图像始终占据视口高度。在您的情况下调整浏览器大小时，它会通过收缩高度和宽度来保持纵横比。但它应该裁剪宽度，并保持高度恒定在100vh。请访问mediaboom.com以获取参考。