我无法让背景视频适合所有设备和浏览器的屏幕。不知何故，我在 chrome 浏览器上完全成功了。早些时候它在 chrome 浏览器的两侧进行了裁剪。现在我意识到它在 chrome 上没问题，但在 IE edge 上问题仍然存在
我已经编写了代码，只需要专家的验证或对其进行任何改进
这是密码笔https://codepen.io/jslearner1/pen/ydrzZz?editors=1100
*{
margin:0;
padding:0;
}
body{
font-size: 62.5%;
box-sizing: border-box;
font-family: 'Lato',sans-serif;
letter-spacing: 0.5px;
line-height: 1.7;
background-color: #fcfcfc;
}
.header{
width: 100%;
height: 100vh;
font-size: 2rem;
color: #fcfcfc;
position: relative;
z-index: 99;
overflow: hidden;
.overlay{
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100vh;
background-color: rgba(#000000,0.8);
z-index: 1;
&__text{
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
}
}
}
.bg_video{
position: absolute;
top:0;
left:0;
width: 100%;
height: 100vh;
object-fit: cover;
} <body>
<header class="header">
<div class="overlay">
<div class="overlay__text">
<p>Welcome !!!</p>
</div>
</div>
<!-- Video Taken from George Park Code pen -->
<video autoplay muted loop class="bg_video">
<source src="http://www.georgewpark.com/video/blurred-street.mp4" type="video/mp4">
<source src="http://www.georgewpark.com/video/blurred-street.mp4" type="video/webm">
your browser is not supported
</video>
</header>
</body>最佳答案
类似这个问题:IE and Edge fix for object-fit: cover;
基本上，object-fit 在 Edge 中并不真正起作用(尽管受到支持)。 将您的 .bg_video CSS 替换为:
.bg_video{
position: absolute;
top:50%;
left:50%;
width: 100%;
height:auto;
transform: translate(-50%, -50%);
}
关于html - 只需要一点验证如何使背景视频适合带有覆盖文本的屏幕，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57008865/