我想做一个视频背景，我需要视频改变大小相对于屏幕分辨率，而不是放大视频

I want to make a video background, and I need the video to change size relative the screen resolution, without zooming the video in

本文关键字：视频 相对于 屏幕 放大 分辨率 改变 背景 一个      更新时间：2023-09-26

我最近一直有一个问题与视频背景。视频背景本身工作得很好，它是由一个朋友在4k中为我渲染的，我可以通过以下代码将其输入到我的背景中:

Html = 

<video autoplay loop muted poster="css/videobackground/poster.png" id="video-bg">
    <source src="css/videobackground/GLitch4.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>
Css = 

#video-bg {
    position: fixed;
    right: 0;
    top: 0;
    width: 100%     !important;
    height: auto    !important; 
    z-index: -1;
    background: transparent url(videobackground/poster.png) no-repeat;
    background-size: cover;
}

这应该是非常简单的，但在我的学校，家里和朋友家的一堆不同尺寸的屏幕上测试后，每个屏幕的分辨率都非常不同。我发现，在较薄的屏幕上，使用这段代码可以使屏幕底部出现一条白色条纹:https://i.stack.imgur.com/99nqo.jpg我通过改变宽度和高度来解决这个问题:

width: auto     !important;
height: 100%    !important;

但这意味着在非常宽屏的计算机上，它会沿着屏幕左侧创建一条白色条:https://i.stack.imgur.com/c0T2g.png我也试过将宽度和高度设置为100%，但在宽屏幕上，这会使两个白色条纹出现在视频(或背景图像)的两侧，而在非常薄/高的屏幕上，白色条纹出现在屏幕的底部和顶部(或背景图像)。我尝试过的另一件事是将宽度和高度设置为auto/cover(两者都做同样的事情):

width: auto     !important;
height: auto    !important;

这是有效的，它使视频全屏，而不是在任何屏幕分辨率上创建任何白色条带，但，它使视频看起来非常放大，我不能再得到非常干净，4k的视频外观。相反，它看起来像像素化的，而且非常放大。

我想知道是否有人可以帮助我设置参数的视频，所以它是全屏在任何分辨率没有使其放大。这可能意味着视频在某些屏幕上被拉伸/压缩，但我宁愿视频有拉伸/压缩效果，而不是在侧面和底部/顶部有白色条纹或放大效果。如果有人能帮忙，请帮忙。(我有外部javascript文件，所以如果这个问题需要javascript或JQuery，那很好。)

我想你可以使用z-index，高度将为auto

尝试调整尺寸

https://jsfiddle.net/moongod101/uwwpmode/

相关文章：