Video changes back to cover image when not in hover

Issue

I wrote the following HTML to show a thumbnail that plays a video in hover.

<video onmouseover="this.play()" onmouseout="this.pause();this.currentTime=0;"  poster="img.jpg">
<source src="video.mp4" type="video/mp4"></source>
</video>

I want the thumbnail to show the original cover image when not in hover, and not remain on the paused video. How is that possible with HTML?

Solution

It doesn't seem to be possible within the HTML <video> element, so you could try to emulate it with CSS. You can add an absolute positioned element with the image on top of the video container. The image should probably contain a play icon or something that signals that the user can click/hover to see the video. On :hover you can hide the image with display:none and this means if the cursor is removed from the video container area the image will pop back into place.

Something like this (you can remove poster.jpg in the video element):

<style>
.video-container {
  position: relative;
  width: 100%;
  height: 100vh;
}

.video-poster-overlay {
  position: absolute;
  background: url("https://images.pexels.com/photos/1323550/pexels-photo-1323550.jpeg") no-repeat;
  background-size: cover;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.video-poster-overlay:hover {
  display: none;
}

video {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100vh;
}
</style>

<div class="video-container">
  <div class="video-poster-overlay"></div>

  <video onmouseover="this.play()" onmouseout="this.pause();this.currentTime=0;">
    <source src="video.mp4" type="video/mp4"></source>
  </video>
</div>

Answered By - anatolhiman