By default, it's not possible to add an overlay effect to a section or any other Divi modules that contain a video background.
Here is a simple CSS trick that you can use to get an overlay effect for your video backgrounds. This example is explained for the Divi Section but you can implement it for any Divi module.
First of all, define a Background Video under the Section Settings / Background Video where you want to get the effect.
Next, the following code under that Section / Advanced tab / Custom CSS / Before Element field:
content:"";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.6);
z-index: 9;
Like this:
The color of the overlay is defined in this line:
background: rgba(0,0,0,0.6);
So, you can simply replace it with whatever you need. For example, if you need a gradient-based overlay you can use this one:
background-image: linear-gradient(180deg,#0c71c3 0%,#29c4a9 100%)!important;
You can use the following online service to generate any background overlay color you want to use:
โhttps://cssgradient.io/
Lastly, you may need to increase the z-index of the Row inside that section, sometimes the overlay may be overlapping the module/content inside that section.
To fix this, you can go to that Row settings > Advance > Position settings and increase the z-index to 10
That's it! ๐