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

Question

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>

Answer 1

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>

Answer 2

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 onmouseover="this.play();" onmouseout="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>

Answer 3

Thanks to both of you. I was able to implement your method Josh. Final code below. Although I'm still getting errors in Liveweave with my video, div, and a closing tags. Am I correct in thinking that's a syntax error?

<video autoplay=autoplay loop muted class="reel">
    <source src="https://drive.google.com/uc?export=download&id=1wlICW95QiyJAHHwySaFVGIi5HsA5eoCC" type="video/mp4">
</video>


<div class="wrapper">

    <a href="/hastalaraiz">
        <div class="gone" style="position:relative;">
            <img src="https://topspinstudios.com/s/Hasta-Poster.png" style="position:absolute;z-index:1;" class="hasta">
            <video onmouseover="this.play();" onmouseout="this.pause();" loop muted width="100%">
                <source src="https://topspinstudios.com/s/hasta-loop.mp4" type="video/mp4">
            </video>
        </div>
    </a>

    <a href="/unfenced">
        <div class="gone" style="position:relative;">
            <img src="https://topspinstudios.com/s/Unfenced-Poster.png" style="position:absolute;z-index:1;" class="unfenced">
            <video onmouseover="this.play();" onmouseout="this.pause();" loop muted width="100%">
                <source src="https://topspinstudios.com/s/Unfenced-Loop-hffs.mp4" type="video/mp4">
            </video>
        </div>
    </a>

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

    <a href="/panchoclaus">
        <div class="gone" style="position:relative;">
            <img src="https://topspinstudios.com/s/Pancho-Poster.png" style="position:absolute;z-index:1;" class="districtvision">
            <video onmouseover="this.play();" onmouseout="this.pause();" loop muted width="100%">
                <source src="https://topspinstudios.com/s/Pancho-Loop.mp4" type="video/mp4">
            </video>
        </div>
    </a>

    <a href="/ridingfromtheheart">
        <div class="gone" style="position:relative;">
            <img src="https://topspinstudios.com/s/RFTH-Poster.png" style="position:absolute;z-index:1;" class="ridingfromtheheart">
            <video onmouseover="this.play();" onmouseout="this.pause();" loop muted width="100%">
                <source src="https://topspinstudios.com/s/Riding-From-The-Heart-Loop.mp4" type="video/mp4">
            </video>
        </div>
    </a>

    <!-- <a href="/dadstrength"> -->
    <div class="gone" style="position:relative;">
        <img src="https://topspinstudios.com/s/DadStrength-Poster.png" style="position:absolute;z-index:1;" class="dadstrength">
        <video onmouseover="this.play();" onmouseout="this.pause();" loop muted width="100%">
            <source src="https://topspinstudios.com/s/DadStrengthLoop.mp4" type="video/mp4">
        </video>
    </div>
    </a>

</div>

CSS Below

.reel {
    height: auto;
    margin-bottom: 2em;
    pointer-events: none;
    width: 100%;
}

.wrapper {
    column-gap: 1em;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    row-gap: 1em;
}

.gone:hover img {
    display: none;
}

.hasta {
    display: block;
    margin: 10%;
    width: 80%;
}

.unfenced {
    display: block;
    margin: 10%;
    width: 80%;
}

.districtvision {
    display: block;
    margin: 10%;
    width: 80%;
}

.panchoclaus {
    display: block;
    margin: 10%;
    width: 80%;
}

.ridingfromtheheart {
    display: block;
    margin: 10%;
    width: 80%;
}

.dadstrength {
    display: block;
    margin: 10%;
    width: 80%;
}