我有一张图像,我将其用作背景,以防视频背景无效。它具有响应性,并且按照预期的方式工作,但图像的顶部和底部都有黑色空间。请参阅:https://robotplaytime.paperplane.io/
将屏幕宽度调整得更小,黑色空间变得更加突出。
知道如何移除黑色空间吗?需要保持纵横比。图像可能大于屏幕尺寸。
由于
HTML
<body>
<video poster="images/robotPlaytimeVideo.png" id="bgvid">
</video>
</body>
CSS
video {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
object-fit: cover;
background: url(../images/robotPlaytimeVideo.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}