我想制作视频背景，我需要视频根据屏幕分辨率改变大小，而不放大视频

Question

我最近遇到了视频背景问题。视频背景本身工作正常，它是由一位朋友以 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;
}

它本来应该很简单，但在我学校、家里和朋友家里的一大堆不同尺寸的屏幕上测试它之后，每个屏幕的分辨率都非常不同。我发现在较薄的屏幕上，使用这个确切的代码会使屏幕底部出现一条白色条带： http://i.imgur.com/2Zt3r7a.jpg 我通过将宽度和高度更改为：

来解决此问题

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

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

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

有效，它使视频全屏显示，并且在任何屏幕分辨率下都不会创建任何白条，但是，它使视频看起来非常放大，我无法再非常干净，4k 看看视频。相反，它看起来像素化且极度放大。

我想知道是否有人可以帮助我为视频设置参数，使其在任何分辨率下全屏 而无需 放大。这可能意味着视频 stretched/squished 在某些屏幕上，但我宁愿对视频产生 stretched/squished 效果，也不愿在侧面出现白色条纹和 bottom/top 或放大效果。如果有人可以提供帮助，请提供帮助。（我有外部 javascript 文件，所以如果这个问题需要 javascript 或 JQuery，没关系。）

Answer 1

我认为你可以使用 z-index 并且高度将是 auto

尝试调整大小在 JSfiddle

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

我想制作视频背景，我需要视频根据屏幕分辨率改变大小，而不放大视频

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

html

javascript

css

html5-video

responsive-design