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;
}