Swharton24 Posted June 3, 2021 Share Posted June 3, 2021 Site URL: https://fish-nectarine-wbzr.squarespace.com/reel I'd like to display video captions on hover instead of below the video. Is there a way to do this, perhaps with an overlay color so the captions are more visible? I'm attaching an example from another site. Thanks! Link to comment
0 tuanphan Posted June 5, 2021 Share Posted June 5, 2021 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 tuanphan Posted June 4, 2021 Share Posted June 4, 2021 Hi. Your site is private. Can you setup password & share url gain? 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 Swharton24 Posted June 4, 2021 Author Share Posted June 4, 2021 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 Link to comment
0 Swharton24 Posted June 7, 2021 Author Share Posted June 7, 2021 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 MimiRobson Posted June 17, 2021 Share Posted June 17, 2021 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! Link to comment
0 tuanphan Posted June 18, 2021 Share Posted June 18, 2021 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 MimiRobson Posted July 2, 2021 Share Posted July 2, 2021 Thank you so much! However this seems to prevent the ability to start the video playing? any thoughts on how to remedy this? Link to comment
0 claireh2006 Posted July 30, 2021 Share Posted July 30, 2021 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 tuanphan Posted August 1, 2021 Share Posted August 1, 2021 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 claireh2006 Posted August 2, 2021 Share Posted August 2, 2021 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!! Link to comment
0 kjacobsen84 Posted November 14, 2021 Share Posted November 14, 2021 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. Link to comment
0 tuanphan Posted November 15, 2021 Share Posted November 15, 2021 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 johnfrost Posted December 8, 2021 Share Posted December 8, 2021 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 Link to comment
0 tuanphan Posted December 12, 2021 Share Posted December 12, 2021 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 tuanphan Posted January 16 Share Posted January 16 Add this CSS under /* Text behind play icon */ .sqs-video-icon { z-index: 9999999999999999; } 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 AnnaAntonia Posted May 24 Share Posted May 24 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 AnnaAntonia Posted June 24 Share Posted June 24 (edited) 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 June 28 by AnnaAntonia Incorrect URL Link to comment
0 tuanphan Posted June 26 Share Posted June 26 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 AnnaAntonia Posted June 28 Share Posted June 28 (edited) 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. Edited June 28 by AnnaAntonia Link to comment
0 AnnaAntonia Posted June 28 Share Posted June 28 @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? Link to comment
0 tuanphan Posted June 30 Share Posted June 30 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 AnnaAntonia Posted July 1 Share Posted July 1 @tuanphanThere's no way to fix the video overlay with CSS code? Is it because I'm using 7.1? Link to comment
0 tuanphan Posted July 2 Share Posted July 2 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
Question
Swharton24
Site URL: https://fish-nectarine-wbzr.squarespace.com/reel
I'd like to display video captions on hover instead of below the video. Is there a way to do this, perhaps with an overlay color so the captions are more visible? I'm attaching an example from another site.
Thanks!
Link to comment
Top Posters For This Question
10
2
3
6
Popular Days
Jun 28
2
Jun 4
2
Jun 17
1
Aug 2
1
Top Posters For This Question
tuanphan 10 posts
MimiRobson 2 posts
Swharton24 3 posts
AnnaAntonia 6 posts
Popular Days
Jun 28 2022
2 posts
Jun 4 2021
2 posts
Jun 17 2021
1 post
Aug 2 2021
1 post
Posted Images
24 answers to this question
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment