Jump to content

How do I add a hover layer on top of my embedded video that has text and takes away the play symbol

Go to solution Solved by Beyondspace,

Recommended Posts

Hello, I would like to create a hover effect over my embedded video that highlights a text of what said video is.  In doing this, I would like the play button to go away.  Is this possible?  Below is the site I'm currently building as well as an example of a site I would like to mirror.  Please advise.

Site I'm building:

https://grey-salmon-msk9.squarespace.com/config/pages

Password:  TRIXIE.

Site I would like my site to look like. 

https://www.rachelmorrison.com/directing-commercials

You will see when you hover over the commercials on this site, the title of the commercial appears.  Also, there is no play symbol.  Is this possible to do on the site I'm building?

Attached is a pic of the site I'm building and the site I would like to mirror.

Thank you so much for your help!

Natalee

Screen Shot 2024-04-29 at 10.15.49 AM.png

Screen Shot 2024-04-29 at 10.16.22 AM.png

Link to comment
  • Solution
9 hours ago, 1000Watts said:

Hello, I would like to create a hover effect over my embedded video that highlights a text of what said video is.  In doing this, I would like the play button to go away.  Is this possible?  Below is the site I'm currently building as well as an example of a site I would like to mirror.  Please advise.

Site I'm building:

https://grey-salmon-msk9.squarespace.com/config/pages

Password:  TRIXIE.

Site I would like my site to look like. 

https://www.rachelmorrison.com/directing-commercials

You will see when you hover over the commercials on this site, the title of the commercial appears.  Also, there is no play symbol.  Is this possible to do on the site I'm building?

Attached is a pic of the site I'm building and the site I would like to mirror.

Thank you so much for your help!

Natalee

Screen Shot 2024-04-29 at 10.15.49 AM.png

Screen Shot 2024-04-29 at 10.16.22 AM.png

If you remove the play button, how can clients play the video? Or do you mean that when users do not hover, it will have a dark background with text? Only if the user hovers over the video, the play buttons will appear.

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Good Morning, 

Apologies for the confusion. Similar to the website I'm hoping to mirror, where you hover over the image and the word IKEA comes up and image darkens (image below - website - https://www.rachelmorrison.com/directing-commercials) have an image, without  play button on it (as my site currently does - image below - website site: https://www.gretchenwarthen.com/unscripted .  Password: TRIXIE) and when the user hovers over, the background goes darker and the text appears showing what the image is.  So if my site would do that, I would not see the play button on my icon, it would instead read TOUGH AS NAILS when the viewer hovers. The hand icon on the cursor would then indicate to the viewer to click to dive deeper into the site.  Once in, obviously they would need that play icon on the embedded player to play the video.     I hope that is more clear.  

Thank you for  you help!

Natalee

Screen Shot 2024-04-30 at 8.09.42 AM.png

Screen Shot 2024-04-30 at 8.11.04 AM.png

Link to comment
1 hour ago, 1000Watts said:

Good Morning, 

Apologies for the confusion. Similar to the website I'm hoping to mirror, where you hover over the image and the word IKEA comes up and image darkens (image below - website - https://www.rachelmorrison.com/directing-commercials) have an image, without  play button on it (as my site currently does - image below - website site: https://www.gretchenwarthen.com/unscripted .  Password: TRIXIE) and when the user hovers over, the background goes darker and the text appears showing what the image is.  So if my site would do that, I would not see the play button on my icon, it would instead read TOUGH AS NAILS when the viewer hovers. The hand icon on the cursor would then indicate to the viewer to click to dive deeper into the site.  Once in, obviously they would need that play icon on the embedded player to play the video.     I hope that is more clear.  

Thank you for  you help!

Natalee

Screen Shot 2024-04-30 at 8.09.42 AM.png

Screen Shot 2024-04-30 at 8.11.04 AM.png

You can try the following Custom Css

/*hide play button, add the hover effect background, general css to set text on hover*/
#collection-662c1e2ee31c86635a14da05 .sqs-video-wrapper .sqs-video-overlay .sqs-video-opaque {
  background: rgba(0,0,0,0.7);
}

#collection-662c1e2ee31c86635a14da05 .sqs-video-overlay:hover .sqs-video-opaque {
  opacity:1;
  transition: opacity 0.3s ease-out;
}

#collection-662c1e2ee31c86635a14da05 .sqs-video-overlay .sqs-video-icon {
  opacity: 0;
  z-index: 3;
}

#collection-662c1e2ee31c86635a14da05 .sqs-video-overlay:before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  color: #fff;
  font-weight: bold;
  opacity: 0;
  font-size: 22px;
}

#collection-662c1e2ee31c86635a14da05 .sqs-video-overlay img {
  z-index: 0;
}

#collection-662c1e2ee31c86635a14da05 .sqs-video-overlay:hover:before {
  opacity: 1;
  transition: opacity 0.3s ease-out;
}


/*Text Content on hover for each block*/
#block-yui_3_17_2_1_1714268710793_46764 .sqs-video-overlay:before {
  content: 'Touch as nails'
}

My testing

image.thumb.png.3b554e7af3dcef0c205dd0985c552d6d.png

Let me know how it works on your site

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
10 hours ago, 1000Watts said:

Hi following up on this to see if you wouldn't mind look at my site to see why this code is not working.  

Thank you!

Can you take screenshots where you are adding my code?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

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...

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.