大视频CSS背景视频大小问题
我在调整大小以保持大视频宽高比时遇到问题。我使用这个演示代码:https://codeconvey.com/fullscreen-html5-responsive-video-background/大视频CSS背景视频大小问题
我的问题是,我可以让视频集中正常工作,并且视频调整大小保持纵横比,如果窗口大于视频,但1920x1080视频是不调整尺寸以适应在较小屏幕上的浏览器的高度或宽度(例如,1440px宽的笔记本电脑)。看起来,视频从来没有从原始尺寸缩小。
就好像人体不理解视口小于1920x1080,因为我怀疑它是基于视频元素宽度定义100%宽度。如果我将1280x720p视频下载到此代码中,调整大小的工作完美无瑕,因为视频始终调整大小以填充浏览器屏幕。
我曾尝试将视频包装到容器元素中,但没有看到改进,改变了任何组合中的相对/固定/绝对位置以及为html,body,container div等定义宽度高度。
如果可能,我不想依赖javascript。我也想用质量为目的的1080p视频。放大720p视频无法满足我对这个特定项目的需求。
我需要的是:响应式背景视频,覆盖整个浏览器窗口,使用1080p视频,视频可以适应屏幕的最小尺寸,同时保持视频的宽高比。 (视频必须在较小的屏幕上缩小)
这是你在找什么?从这里
<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>
采取:
这需要对象配合这是在CSS世界相对较新,所以要小心的兼容性的优势。
我相信在这样的背景下拉伸视频时,总是会有轻微的缩放问题,因为视口很可能与视频的缩放尺寸不匹配。不过,我认为这是解决您的问题的适当方法,因为缩放视频的一个维度是为了覆盖背景而不缩放到视口外。
这种方法在Chrome上绝对可以正常工作,但IE11和Edge上缺少对象适配的支持使其无法用于此项目。不幸的是,我必须支持这些浏览器。 – creativename
你有没有试过在视频上设置'width:100%'? – SpyderScript
不,内联宽度为100%不允许覆盖整个视口。它确实读取宽度,但在顶部和底部留下间隙。 – creativename