I added custom video overlays and hover text but now the videos won't play

Hello!

I added css to create custom overlay colors and hover text to my videos on the site, but now the videos won't play. When I click them, nothing happens. 

This is the css I used:

/* Reels video overlay */
.video-caption-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    text-align: center;
    color: white;
    font-size: 16px;
    z-index: 50000;
    pointer-events: none;
    opacity: 0;
    transition: all 0.3s;
}
.video-block .intrinsic:after {
    content: "";
    background-color: rgba(95,2,53,0.5);
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20000;
    position: absolute;
    opacity: 0;
    transition: all 0.3s;
}
.video-block:hover .intrinsic:after {
    opacity: 1;
    transition: all 0.3s;
}
.video-block:hover .video-caption-wrapper {
    opacity: 1;
    transition: all 0.3s;
}
.gallery-grid-item-wrapper a:after {
    content: "";
    background-color: rgba(95,2,53,.25) !important;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    opacity: 0;
    transition: all 0.3s;
}
.gallery-grid-item-wrapper a:hover:after {
    opacity: 1;
    transition: all 0.3s;
}
figure.gallery-grid-item:hover * {
    color: white;
    font-size: 15px; font-family: 'Archivo Black' !important
}
.gallery-caption p{text-align:center !important}
figcaption.gallery-caption.gallery-caption-grid-simple {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999999999;
    transition: opacity ease 200ms !important;
    opacity: 0 !important;
    pointer-events: none;
}
figure:hover figcaption.gallery-caption.gallery-caption-grid-simple {
    opacity: 1 !important;
}
.gallery-caption-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

that was it - thank you!!

Hey! I tried using this code but I'm struggling to find how to edit it to include type or text to the overlay. Any suggestions?

On 2/14/2024 at 5:05 AM, SamIsLaughing said:

Hey! I tried using this code but I'm struggling to find how to edit it to include type or text to the overlay. Any suggestions?

Can you share link to page where you have problem? We can check easier