Jump to content

Text overlay on autoplay video (how to hide text on hover/play?)

Recommended Posts

Site URL: https://contrabass-paddlefish-w396.squarespace.com/

Hey squarespace fam,

I've got a video set up to autoplay on hover and have added command copy "hover to play". However, I'd like this text to fade out or hide on play so that it doesn't block the video or mess with the hover function. I'm assuming this will require Javascript. Can someone assist? Thanks in advance!

HTML:

<div class="container">

<video id="video" width="100%" height="auto" loop="true" playsinline="true" class="" onmouseover="this.play()" onmouseout="this.pause();this.currentTime=0;">
<source src="https://www.dropbox.com/s/tq636ve4wq81nir/IMG_3040.MOV?raw=1" type="video/mp4"> </video>

    <div class="overlay">
      <p>Hover to play</p>
    </div>
</div>

CSS:

.container { position:relative; }
.container video {
    position:relative;
    z-index:0;
  text-align:center;
  vertical-align: middle;
}

.overlay {
    position:absolute;
    top:75%;
    left:0;
    z-index:1;
  	font-size: 20px;
  	font-family: Clarkson;
    font-weight: 800;
  	font-style: italic;
    color: white; 
  	width:100%;
    text-align:center;
  	vertical-align: middle;
}

 

Screen Shot 2021-02-09 at 1.45.54 PM.png

Link to comment
  • Replies 2
  • Views 1.7k
  • Created
  • Last Reply
  • 2 months later...

Archived

This topic is now archived and is closed to further replies.

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