Css 全宽视频背景
我正在尝试我的第一个网络视频项目，但毫无进展，需要一些帮助来使用全宽视频标题或背景 我发现了一个例子，它可以实现我在下面的视频中尝试的功能，效果很好-没有缓冲，质量可以接受，等等 .mp4文件使用640x360格式@23 fps（613kbps），在我查看的任何显示器上都可以正常工作-整个帧从上到下、从一侧到另一侧都可见 我所做的研究表明，最好的视频格式是720x24fps，我也尝试过（实际尺寸是1280x720），但发现它只能在浏览器分辨率低于最大值的情况下工作，在这种情况下，它看起来很棒，否则，底部的一小部分，可能是帧的底部18%，在向下滚动之前是看不见的，这是不能接受的。我需要的视频工作以及640x360与整个图像可见。此外，720格式会产生缓冲，而640x360格式不会产生缓冲 我使用索尼维加斯进行视频编辑，没有640x360格式的选项。最接近的是640x480，但这会产生相同的结果-到高度，底部不可见 有一个站点成功地使用了1280x720格式（），但我不知道如何使用 有人能给我指出正确的方向吗 多谢各位 这是当前代码：Css 全宽视频背景,css,html,video,Css,Html,Video,我正在尝试我的第一个网络视频项目，但毫无进展，需要一些帮助来使用全宽视频标题或背景 我发现了一个例子，它可以实现我在下面的视频中尝试的功能，效果很好-没有缓冲，质量可以接受，等等 .mp4文件使用640x360格式@23 fps（613kbps），在我查看的任何显示器上都可以正常工作-整个帧从上到下、从一侧到另一侧都可见 我所做的研究表明，最好的视频格式是720x24fps，我也尝试过（实际尺寸是1280x720），但发现它只能在浏览器分辨率低于最大值的情况下工作，在这种情况下，它看起来很棒
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Video test</title>
<script>
$(document).ready(function () {
$(".player").mb_YTPlayer();
});
</script>
<style>
body{ margin:0px; background:#000; max-width:1000; }
#bg_container{ height:800px; overflow:auto; }
#bg{ width:100%; }
</style>
</head>
<body>
<div id="bg_container">
<video id="bg" src="www.parishpc.com/images/720.mp4" autoplay loop muted"> </video>
</div>
</body>
</html>
视频测试
$（文档）.ready（函数（）{
$（“.player”）.mb_YTPlayer（）；
});
正文{边距：0px；背景：#000；最大宽度：1000；}
#bg_容器{高度：800px；溢出：自动；}
#bg{宽度：100%；}
试一试
并删除transform:translate（-50%，-50%）来自视频类
这应该行得通
如果您需要任何进一步的帮助，请告诉我
并删除transform:translate（-50%，-50%）来自视频类
这应该行得通
如果您需要任何进一步的帮助，请告诉我我不确定您到底想要什么，但是如果要适应每个用户的窗口大小，拥有一个没有拉伸或切割部分的视频背景是不可能的
此解决方案将确保视频为窗口高度的100%。如果他们想看到被切割的部分，他们必须调整窗口大小以适应宽度
视频测试
身体{
保证金：0；
填充：0；
}
#容器{
身高：100%；
宽度：自动；
}
.视频{
身高：100%；
}
我不确定您到底想要什么，但要想适应每个用户的窗口大小，拥有一个没有拉伸或切割部分的视频背景是不可能的
此解决方案将确保视频为窗口高度的100%。如果他们想看到被切割的部分，他们必须调整窗口大小以适应宽度
视频测试
身体{
保证金：0；
填充：0；
}
#容器{
身高：100%；
宽度：自动；
}
.视频{
身高：100%；
}
如果仍有人试图让视频占据整个视口，可以使用以下代码完成此操作->
（我也相当确定这要求您使用标记通过.html添加视频，而不是将其作为背景添加到css属性中）
将要填充视频的父容器设置为：
position: relative;
将以下属性添加到视频中：
height: 100vh;
width: 100vw;
position: absolute;
top: 0;
left: 0;
z-index: -2;
object-fit: fill;
如果有人仍试图使视频占据整个视口，可以使用以下代码完成此操作->
（我也相当确定这要求您使用标记通过.html添加视频，而不是将其作为背景添加到css属性中）
将要填充视频的父容器设置为：
position: relative;
将以下属性添加到视频中：
height: 100vh;
width: 100vw;
position: absolute;
top: 0;
left: 0;
z-index: -2;
object-fit: fill;
因为你不能依赖一致的屏幕分辨率，你可以做#bg_container{margin:0 auto；}
并使用JavaScript确定屏幕高度，然后确定宽度，记住#bg_container
并且你的视频应该是相同的高度和宽度；“在#bg_容器中，我只是出于绝望。我尝试了100%和自动，得到了相同的结果。使用JavaScriptinnerHeight
获得寡妇高度。实际上，您不必在它前面放置window.
，因为window
是隐式的。哦，您使用的是jQuery…$（'#bg，#bg#容器'）。高度（$（window）.height（））
.1280x720和640x360非常适合，因为它们都是标准的16:9纵横比。640x480是16:12 AR，我想不起来是否有这样的标准。@Texson顺便说一句，我注意到您已经调用了mbYTPlayer插件……为什么不直接使用它呢？它的目的是用视频边到边覆盖您的背景。不仅仅是如果你正在使用该插件，那么你正在使用YouTube，如果你正在使用YouTube，默认情况下视频的大小为16:9 AR。因为你不能依赖一致的屏幕分辨率，你可以使用#bg_容器{margin:0 auto；}
并使用JavaScript确定屏幕高度，然后确定宽度，记住#bg_contaier
和您的视频应该是相同的高度和宽度。出于绝望，我在#bg_容器中添加了'height:800px。我尝试了100%和自动，得到了相同的结果。使用JavaScriptinnerHeight
获得寡妇的身高。实际上，您不必将window.
放在它前面，因为window
是隐式的。哦，您正在使用jQuery<代码>$（'#bg，#bg_container'）。高度（$（window）.height（））
.1280x720和640x360非常适合，因为它们都是标准的16:9纵横比。640x480为16:12 AR至