Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Overlay and Caption on Hover for Videos


Swharton24

Question

  • Answers 24
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

24 answers to this question

Recommended Posts

  • 0

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

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
  • 0
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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

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


×
×
  • Create New...