Struggling to make the background video fit perfectly on all devices and browsers? While it looks great in Chrome now, I'm still facing some clipping issues with IE Edge. Any experts out there who can offer their validation or suggest improvements?
If you want to take a look at the code, here's the link to the CodePen: 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>