Jump to content

Overlay and Caption on Hover for Videos

Go to solution Solved by tuanphan,

Recommended Posts

  • Replies 29
  • Created
  • Last Reply

Top Posters In This Topic

  • Solution

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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!!

Link to comment
  • 2 weeks later...
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.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...
  • 4 weeks later...
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! 

Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 3 months later...
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 4 weeks later...
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 month later...
  • 4 months later...
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

Link to comment
  • 5 weeks later...

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

 

Edited by AnnaAntonia
Incorrect URL
Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 3 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.