如何修复“视频不是全屏”
如何修复“视频不是全屏”
提问于 2019-03-30 19:22:27
我正在建立一个与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="highlight.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>我还以为视频是全屏的呢。
回答 2
Stack Overflow用户
发布于 2019-03-30 19:33:15
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>
你可以随心所欲地放上你的视频
Stack Overflow用户
发布于 2019-03-30 19:51:01
/* Style the video: 100% width and height to cover the entire window */
#myVideo {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
}
/* Add some content at the bottom of the video/page */
.content {
position: fixed;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
color: #f1f1f1;
width: 100%;
padding: 20px;
}
/* Style the button used to pause/play the video */
#myBtn {
width: 200px;
font-size: 18px;
padding: 10px;
border: none;
background: #000;
color: #fff;
cursor: pointer;
}
#myBtn:hover {
background: #ddd;
color: black;
}<!-- The video -->
<video autoplay muted loop id="myVideo">
<source src="rain.mp4" type="video/mp4">
</video>
<!-- Optional: some overlay text to describe the video -->
<div class="content">
<h1>Heading</h1>
<p>Lorem ipsum...</p>
<!-- Use a button to pause/play the video with JavaScript -->
<button id="myBtn" onclick="myFunction()">Pause</button>
</div>
我希望这能解决你的问题。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55430945
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号