Overlay Question please help

I have tried everything to get the text to appear on type of the video background. Can anyone see what i am doing wrong? Thank you!

This is HTML

Welcome to BLVD Medical

Your source for everything PPE.


.video-background-holder {
position: relative;
background-image: rgba(0, 0, 0, 1);
object-fit: cover;
height: calc(100vh - 72px);
min-height: 25rem;
width: 100% !important;
overflow: hidden;
z-index: 2;

.video-background-holder video {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto !important;
height: auto !important;
z-index: 4;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);

May be this can help you:

Hi @bensantoslevi, it’s probably easier to help you if you could make a simple demo that people can inspect and help you debug.

A codepen or any other sharable link will do :slight_smile:

How do I insert a codepen?


Your overlay is empty (has no content), so it’s rather normal that no text appears on the background.

Or in other words I don’t think I fully understand your problem:

Hey there is no video and text to appear.

The video is there, the file just didnt attach.

Welcome to BLVD Medical

Your source for everything PPE.

Welcome to BLVD Medical

i cant get it to just show the code

Well, codepen won’t read a file you have living in your computer. It needs to be somewhere publicly accessible.

But regardless of the video showing or not, my understanding is that your overlay is “not appearing” right?

Well in your code you have

 <div class="video-background overlay"></div>

an empty div, an empty div won’t have height for a browser, so it will not display.