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

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;
}

Hi. Do you still need help on this?

Hey! Nope I think I'm all good here. Thanks for reaching out!