I'm having trouble with an HTML5 video. Look it is a video that when you hover in it has to show a semi transparent overlay including text. When the mouse goes out, it has to show again the poster. The poster is an attribute that shows a thumbnail of the video when is not played yet.

In order to show the poster, I have searched other Stack Overflow questions and the workaround is to do: video.load();.

So I have the next piece of code:

HTML:

<div class="video-container" onMouseOver="video.play();showOverlay('#video-overlay');" onMouseOut="video.load();hideOverlay('#video-overlay');">
  <video poster="https://example.com/poster.jpg" src="https://example.com/video.mp4" id="video" width="300" muted="muted" loop title="Example video" />
  <a href="#">
    <div class="overlay" id="video-overlay">
      <h5>Overlay Title</h5>
      <p>Overlay Description</p>
    </div>
  </a>
</div>

CSS:

.video-container {
  position: relative;
}

.overlay {
    background: rgba(0,0,0,0.6);
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: 0.5s ease-in;
    z-index: 999; /* does not work */
}

.overlay > h5 {
    font-size: 30px;
    font-weight: 900;
    text-transform: uppercase;
}

JS:

function showOverlay(selector){
  const overlay = document.querySelector(selector);
  overlay.style.opacity = "1";
}
function hideOverlay(selector){
  const overlay = document.querySelector(selector);
  overlay.style.opacity = "0";
}

WATCH THE DEMO

The problem:

Well, when you hover the video and you are near the text (h5 or p tags) the video loads again. It should not restart, instead, continue as normal.

Tip: I have replaced video.load(); for video.pause(); and everything works fine. But that is not the functionality I want.