How to Darken Background in a video without affecting the text over it?
<div class="fullscreen-bg">
<video loop muted autoplay poster="img/videoframe.jpg" class="fullscreen-bg__video">
<source src="images/instituteVideo.webm" type="video/webm">
</video>
<div class="text-vid">
<h2 class="texts">Transform into a Smart Institute</h2>
</div>
</div>
.fullscreen-bg {
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 84vh;
width: 100%;
overflow: hidden;
object-fit: cover;
z-index: -99;
position: relative;
filter: brightness(75%);
}
.text-vid {
position: absolute;
top:10%;
}
This is what i have tried , i have also tried using background-color which doesn't work. Using filter darkens the background , but also affects the text color
Simply add this-
video {
filter: brightness(50%);
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With