Overlay and Caption on Hover for Videos

Add to Design > Custom CSS

/* 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(0,0,0,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;
}

Hi. Your site is private. Can you setup password & share url gain? We can check easier

1 hour ago, tuanphan said:

Hi. Your site is private. Can you setup password & share url gain? We can check easier

Yep! Here's the site and pw - thanks! 

https://fish-nectarine-wbzr.squarespace.com/

c?yNhS8>vmJd`YMA

On 6/5/2021 at 9:29 AM, tuanphan said:

Add to Design > Custom CSS

/* 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(0,0,0,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;
}

 

This worked perfectly - thank you so much!!

Hi,

Is it possible to apply this to multiple videos each with a different captions on hover? If so, how do you identify each caption with each video?

Many thanks!

12 hours ago, MimiRobson said:

Hi,

Is it possible to apply this to multiple videos each with a different captions on hover? If so, how do you identify each caption with each video?

Many thanks!

Above code target all videos. You need to add caption first, then add code.

Thank you so much!

However this seems to prevent the ability to start the video playing?

any thoughts on how to remedy this?

On 7/2/2021 at 3:45 PM, MimiRobson said:

Thank you so much!

However this seems to prevent the ability to start the video playing?

any thoughts on how to remedy this?

I'm finding this too - the code for the overlay is perfect, but the videos won't play once the overlay is on. Has anyone got a solution? I am very new to all this! 

On 7/30/2021 at 7:15 PM, claireh2006 said:

I'm finding this too - the code for the overlay is perfect, but the videos won't play once the overlay is on. Has anyone got a solution? I am very new to all this! 

Can you share link to your site? We will check it again

On 7/2/2021 at 9:45 PM, MimiRobson said:

Thank you so much!

However this seems to prevent the ability to start the video playing?

any thoughts on how to remedy this?

Do you still need help?

On 8/1/2021 at 3:49 AM, tuanphan said:

Can you share link to your site? We will check it again

Do you still need help?

the link is https://coyote-dinosaur-h58h.squarespace.com/ and the template is matsuya - thank you!! 

Hello, I've copied the code and it appears to be working except the video doesn't play, like the poster above. Thanks for any assistance.

10 hours ago, kjacobsen84 said:

Hello, I've copied the code and it appears to be working except the video doesn't play, like the poster above. Thanks for any assistance.

Can you share link to page where you use video? We can check easier

Hi there!  

Were you able to figure this out at all?  I'm having the same issue and am trying to add text over video!

Site: www.greymatterscreative.com

On 12/9/2021 at 3:32 AM, johnfrost said:

Hi there!  

Were you able to figure this out at all?  I'm having the same issue and am trying to add text over video!

Site: www.greymatterscreative.com

You mean the kid play game block?

Add this CSS under

/* Text behind play icon */
.sqs-video-icon {
    z-index: 9999999999999999;
}

On 1/16/2022 at 2:06 AM, tuanphan said:

Add this CSS under

/* Text behind play icon */
.sqs-video-icon {
    z-index: 9999999999999999;
}

 

I tried this but it didn't work. The overlay worked great but when I click on the video nothing happens. The OP to this post has the video working on her site but I'm still too new to CSS/HTML to figure out how to replicate this: https://fish-nectarine-wbzr.squarespace.com/work

Site URL: https://fish-nectarine-wbzr.squarespace.com/work

This question has not been resolved and many commenters experienced the same issue: The overlay works great but the videos will not play when clicked. I'm using Squarespace 7.1 and using a video embedded with Vimeo.

I've linked the site with the desired layout because I can't share my site. (I'm still in trial mode and can't share even with password.)

Here is the code:

/* 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(0,0,0,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;
}
/* Text behind play icon */
.sqs-video-icon {
    z-index: -9999999999999999;
}
/* Fullwidth video */
body#collection-605e0f710db7707460c3429e section.Main-content {
    padding-left: 0;
    padding-right: 0;
}

This segment was the suggested solution but I, like others, did not find that this resolved the issue.

/* Text behind play icon */
.sqs-video-icon {
    z-index: -9999999999999999;
}

On 6/24/2022 at 9:13 AM, AnnaAntonia said:

Site URL: https://fish-nectarine-wbzr.squarespace.com/reel

This question has not been resolved and many commenters experienced the same issue: The overlay works great but the videos will not play when clicked. I'm using Squarespace 7.1 and using a video embedded with Vimeo.

I've linked the site with the desired layout because I can't share my site. (I'm still in trial mode and can't share even with password.)

Here is the code:

/* 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(0,0,0,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;
}
/* Text behind play icon */
.sqs-video-icon {
    z-index: -9999999999999999;
}
/* Fullwidth video */
body#collection-605e0f710db7707460c3429e section.Main-content {
    padding-left: 0;
    padding-right: 0;
}

 

This segment was the suggested solution but I, like others, did not find that this resolved the issue.

/* Text behind play icon */
.sqs-video-icon {
    z-index: -9999999999999999;
}

 

The url doesn't work. Can you check it again?

On 6/26/2022 at 2:57 AM, tuanphan said:

The url doesn't work. Can you check it again?

Corrected! The website link is https://fish-nectarine-wbzr.squarespace.com/work

But the site I'm linking is not my site. I can't share my site.

@tuanphanI misread the website sharing options so I can share my website! It's https://mustard-carillon-gjrd.squarespace.com/ and the password is videooverlay. If you scroll down just a little, you'll see the video I'm talking about. Thank you!

Also, can you explain how you're able to troubleshoot? Where in the inspect tools are you looking?

On 6/28/2022 at 11:08 AM, AnnaAntonia said:

@tuanphanI misread the website sharing options so I can share my website! It's https://mustard-carillon-gjrd.squarespace.com/ and the password is videooverlay. If you scroll down just a little, you'll see the video I'm talking about. Thank you!

Also, can you explain how you're able to troubleshoot? Where in the inspect tools are you looking?

It looks like there is no way to fix this.

We usually use Browser Dev Tool to inspect code

@tuanphanThere's no way to fix the video overlay with CSS code? Is it because I'm using 7.1?

12 hours ago, AnnaAntonia said:

@tuanphanThere's no way to fix the video overlay with CSS code? Is it because I'm using 7.1?

Because my code. You try posting on Forum to see if anyone has another better code

Okay, thank you @tuanphan!