我正在使用 HTML + CSS 构建网站。我正在尝试使用视频作为我网站的背景。问题是我的视频左右有问题。
我尝试过使用宽度 100% 和高度 100%，宽度和高度 100vh 和 100vw，以及最小宽度和最小高度 100%，但视频的左右两侧仍然有一些剩余空间
.container {
background: rgba(0, 0, 0, 0.9);
text-align: center;
color: white;
font-size: 2em;
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-gap: 0;
}
/*Adjust container for Fullscreen Video Background*/
.blue {
grid-column: 1/-1;
height: 100vh;
}
.video {
height: 100vh;
min-width: 100%;
min-height: 100%;
}
.video-overlay {
width: 100%;
height: 100vh;
position: absolute;
top: 0;
left: 0;
background: #000000;
z-index: 0;
opacity: 0.75;
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="style.css">
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="container">
<div class="blue area">
<video width="100%" height="100vh" class="blue video-background" src="https://www.w3schools.com/howto/rain.mp4" autoplay muted loop>
</video>
<div class="blue video-overlay"></div>
<nav>
<ul class="navigation sticky">
<li class="arcananame">ARCANA</li>
<li class="choice"><a href="#">Home</a></li>
<li class="choice"><a href="#">About Us</a></li>
<li class="choice"><a href="#">Gallery</a></li>
<li class="choice"><a href="#">Events</a></li>
<li class="choice"><a href="#">Contact Us</a></li>
</ul>
</nav>
<div class="banner title">
<h2 id="banner h1">Welcome to ARCANA</h2>
<h6 id="banner h6">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h6>
</div>
</div>
<div class="red area">red</div>
<div class="green area">green</div>
<div class="yellow area">yellow</div>
<div class="black area">black</div>
</div>
</body>
</html>我预计视频会全屏显示。
最佳答案
body{
padding:0px;
margin:0px;
}
video{
position:fixed;
width:100%;
height:100vh;
}<video width="100%" height="100vh" controls>
<source src="https://www.bigbuckbunny.org.mp4" type="video/mp4">
<source src="https://www.bigbuckbunny.org.ogg" type="video/ogg">
</video>你可以放你喜欢的视频
关于html - 如何修复 "Video is not fullscreen"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55430945/