大视频CSS背景视频大小问题

我在调整大小以保持大视频宽高比时遇到问题。我使用这个演示代码：https://codeconvey.com/fullscreen-html5-responsive-video-background/大视频CSS背景视频大小问题

我的问题是，我可以让视频集中正常工作，并且视频调整大小保持纵横比，如果窗口大于视频，但1920x1080视频是不调整尺寸以适应在较小屏幕上的浏览器的高度或宽度（例如，1440px宽的笔记本电脑）。看起来，视频从来没有从原始尺寸缩小。

就好像人体不理解视口小于1920x1080，因为我怀疑它是基于视频元素宽度定义100％宽度。如果我将1280x720p视频下载到此代码中，调整大小的工作完美无瑕，因为视频始终调整大小以填充浏览器屏幕。

我曾尝试将视频包装到容器元素中，但没有看到改进，改变了任何组合中的相对/固定/绝对位置以及为html，body，container div等定义宽度高度。

如果可能，我不想依赖javascript。我也想用质量为目的的1080p视频。放大720p视频无法满足我对这个特定项目的需求。

我需要的是：响应式背景视频，覆盖整个浏览器窗口，使用1080p视频，视频可以适应屏幕的最小尺寸，同时保持视频的宽高比。（视频必须在较小的屏幕上缩小）

来源

2017-02-17 creativename

你有没有试过在视频上设置'width：100％'？ – SpyderScript

不，内联宽度为100％不允许覆盖整个视口。它确实读取宽度，但在顶部和底部留下间隙。 – creativename

这是你在找什么？从这里

<style> 
    #video-bg { 
     position: fixed; 
     top: 0; 
     right: 0; 
     bottom: 0; 
     left: 0; 
     overflow: hidden; 
    } 

    #video-bg > video { 
     top: 0; 
     left: 0; 
     width: 100%; 
     height: 100%; 
     object-fit: cover; 
    } 
</style> 

<div id="video-bg"> 
    <video autoplay loop> 
     <source src="Boat_15.mp4" type="video/mp4"> 
     Your browser does not support the video tag. I suggest you upgrade your browser. 
    </video> 
</div>

采取：

https://fvsch.com/code/video-background/

这需要对象配合这是在CSS世界相对较新，所以要小心的兼容性的优势。

我相信在这样的背景下拉伸视频时，总是会有轻微的缩放问题，因为视口很可能与视频的缩放尺寸不匹配。不过，我认为这是解决您的问题的适当方法，因为缩放视频的一个维度是为了覆盖背景而不缩放到视口外。

来源

2017-02-17 21:49:46

这种方法在Chrome上绝对可以正常工作，但IE11和Edge上缺少对象适配的支持使其无法用于此项目。不幸的是，我必须支持这些浏览器。 – creativename

大视频CSS背景视频大小问题

回答

相关问题