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

Question

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

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

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

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

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

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

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

Answer 1

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

尝试调整大小在 JSfiddle

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