Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Darken Video Background

Tags:

html

css

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

like image 393
ruchika vasu Avatar asked Jul 10 '26 23:07

ruchika vasu


1 Answers

Simply add this-

video {
   filter: brightness(50%);
}
like image 176
sinmrinal Avatar answered Jul 28 '26 19:07

sinmrinal



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!