How can I add a transparent image overlay on top of a video?-CodePudding

I currently have a series of video thumbnails that play/pause when onmouseover or onmouseout occurs. I would like to add a logo with a transparent background (a .png file) that sits on top of the video and then disappears and reappears when onmouseover or onmouseout occurs while maintaining the play and pause functionality.

I tried using poster="url" but I have not been able to achieve transparency over the video thumbnail or retain the play/pause functionality. Any help is greatly appreciated. Sorry in advance for what I'm guessing is ugly code. I'm way out of my element trying to get this to work.

https://www.wrkshrt.com/ is a good reference for the functionality I'm seeking.

<div>
      <a href=/districtvision>
         <video onm ouseover="this.play();" onm ouseout="this.pause();" loop muted width=100%>
            <source src="https://topspinstudios.com/s/DV-Loop.mp4" type="video/ogg">
         </video>
      </a>
   </div>

CodePudding user response：

I'd throw them both in a position:relative div with a class that hides a contained img on hover. You still have to tell the img where to be within the div.

<style>
  .gone:hover img{display:none;}
</style>

<a href=/districtvision>
  <div  style="position:relative;">
    <img src="yourImage.png" style="position:absolute;z-index:1;">
    <video onm ouseover="this.play();" onm ouseout="this.pause();" loop muted width="100%">
      <source src="https://topspinstudios.com/s/DV-Loop.mp4" type="video/mp4">
    </video>
  </div>
</a>

CodePudding user response：

You can overlay the image by making, say, the video position absolute.

There are a few things that need attention:

Positioning the logo: this snippet does it using flex on the a element and centering it

Getting the video to show at the start (without then playing) so you don't just have a blank black rectangle. This snippet does it by moving to the frame at 0.1seconds (#t=0.1).

The href value in the a element needs quotes

The window=100% in the video is not legal (% not allowed). This snippet uses CSS to size the video - making it fit within whatever the dimensions of the parent are.

The parent is given some dimensions just for this demo. You will have decided what size it is to be (or maybe it is in a flexbox or grid alongside others?)

Pointer events on the img are ignored so that they can be picked up on the video underneath.

Incidentally, how will this all work for the user on a touch device? I guess that's for another question.

  a {
    position: relative;
    width: 200px;
    aspect-ratio: 16 / 9;
    display: inline-block;
    justify-content: center;
    display: flex;
  }
  
  img {
    position: relative;
    top: 0;
    left: 0;
    margin: auto auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    pointer-events: none;
  }
  
  a:hover img {
    display: none;
  }
  
  video {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

<div>
  <a href="/districtvision">
    <video onm ouseover="this.play();" onm ouseout="this.pause();" loop muted width=100>
            <source src="https://topspinstudios.com/s/DV-Loop.mp4#t=0.1" type="video/ogg">
         </video>
    <img src="https://i.stack.imgur.com/y1jXa.png">
  </a>
</div>