Tailwindcss Background-Video with overlay-CodePudding

I've been trying for some time to find a way to have a video as a background in a div which has an overlay making it darker. Also, there should be text in the div container, does anyone have a suggestion on how to do this in Tailwind?

I have presented the whole thing like this. Thanks for your ideas and help.

CodePudding user response：

You can use the brightness-* class utilities to darken the video applying the filter property without another element.

<video ></video>

Or if the element containing the text has the same width and height as the video, you can use the backdrop-brightness-* class utilities to apply the backdrop-filter to the div

<div >
   ...
</div>

CodePudding user response：

Assuming the video gives your div "volume", the easiest way is to use a structure like this:

<div >
    <video > ... <video>
    <div ></div>
    <div >
        <h3 >Title</h3>
        <span >Text</span>
    </div>
</div>

But there are a million ways to achieve something like this. Also. it depends a lot on various other factors that themselves depend on your page structure, etc.

I would refrain from adding opacity to the video because it can be heavy to continuously render.