我正在尝试为我的网站制作一个响应式html视频播放器。这是一个9:16比例的垂直视频播放器。当它加载完整的视频是不可见的滚动(有些部分是在屏幕外，需要滚动)。我想让它在不滚动的情况下完全可见。帮我用CSS解决这个问题。
HTML:
<div class="vidcont">
<video preload="none" controls="true" controlsList="nodownload">
<source src="https://assets.mixkit.co/videos/preview/mixkit-girl-in-neon-sign-1232-large.mp4" type="video/mp4">
</video></div>
CSS:
.vidcont video {
max-height: 100vh;
max-width: 100vw;
width: 100%;
}
try
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>videobg</title>
<style>
body {
margin:0;
}
.mainblock{width:100%; float:left; margin:0 auto; padding:0; height:100vh; position:relative; overflow:hidden;}
.mainblock #video-background{
position: absolute;
left: 0;
right:0;
margin:0 auto;
bottom: 0;
min-width: 100%;
min-height: 100%;
width:100%;
}
@media screen and (max-width:1024px){
.mainblock #video-background{width:auto; height:100vh;}
}
</style>
</head>
<body>
<div class="mainblock">
<video preload="metadata" id="video-background" controls="" autoplay="" loop="" playsinline="" muted="">
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
</video>
</div>
</body>
</html>