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

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


travisandrew

Question

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 post
  • Answers 2
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

Hi. Do you still need help on this?

Posted Images

2 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


×
×
  • Create New...