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

Issue

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 onmouseover="this.play();" onmouseout="this.pause();" loop muted width=100%>
            <source src="https://topspinstudios.com/s/DV-Loop.mp4" type="video/ogg">
         </video>
      </a>
   </div>

Solution

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 class="gone" style="position:relative;">
    <img src="yourImage.png" style="position:absolute;z-index:1;">
    <video onmouseover="this.play();" onmouseout="this.pause();" loop muted width="100%">
      <source src="https://topspinstudios.com/s/DV-Loop.mp4" type="video/mp4">
    </video>
  </div>
</a>

Answered By – joshnishikawa

Answer Checked By – Dawn Plyler (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.