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％，但在宽屏幕上，这会使两个白色条带出现在视频（或背景图像）的两侧，而在非常薄/高的屏幕上，白色条带出现在屏幕的底部和顶部（或背景图像）。我尝试的另一件事是将宽度和高度设置为自动/覆盖（两者都做同样的事情）：

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

哪个有效，它会使视频全屏而不会在任何屏幕分辨率上创建任何白色条带，但，它会使视频显得非常放大，我再也无法让它变得非常干净， 4k看视频。相反，它看起来像素化并且非常放大。

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

Answer 1

我认为您可以使用select jobs.id, jobs.name, jobs.status (select noteField from notes on jobs.id=notes.jobId order by createDate desc limit 1) note where jobs.status='lost'，身高将为z-index

尝试调整大小是在JSfiddle

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

我想制作一个视频背景，我需要视频来改变相对于屏幕分辨率的大小，而无需缩放

1 个答案: