Get an overlay or placeholder on pause using autoplay on Hover HTML Video

Question

I have a question please I got an HTML playing video on hover but once I go away with the mouse I got a hide video function, what I try to do is once I leave the mouse from the playing video to show the placeholder image again something like an Overlay on top of the video. I hope someone can please help me with this.

Here is a live example of the code https://jsfiddle.net/the_nexi/514pwkeo/2/

Thanks in advance

       $(document).ready(function() {       
            $('.video').each(function(i, obj) {
                $(this).on("mouseover", function() { hoverVideo(i); });
                $(this).on("mouseout", function() { hideVideo(i); });
            });
    });

    function hoverVideo(i) {  
            $('.thevideo')[i].play(); 
    }

    function hideVideo(i) {
            $('.thevideo')[i].currentTime = 0; 
            $('.thevideo')[i].pause();
    }

*{font-family: sans-serif}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>If you hover over this Thumbnail the Video will start but once you move the mouse away from the image the Thumbnail (Poster) should appear again with an Overlay this is what I try to do.</p>
<div class="video">
    <video class="thevideo" loop muted preload="auto" poster="https://peach.blender.org/wp-content/uploads/bbb-splash.png?x11217">
        <source src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4" type="video/mp4">
    </video>
</div>

Answer 1

            $(document).ready(function() {       
   $('.video').each(function(i, obj) {
     $(this).on("mouseover", function() { hoverVideo(i); $(this).find(".overlayImage").hide(); });
     $(this).on("mouseout", function() { hideVideo(i); $(this).find(".overlayImage").show(); });
   });
});
function hoverVideo(i) {       
 $('.thevideo')[i].play();             
}
function hideVideo(i) {
  $('.thevideo')[i].currentTime = 0; 
  $('.thevideo')[i].pause();
}

*{font-family: sans-serif}
.video {
  position:relative;
}
.overlayImage {
  position:absolute;
}

<div class="video">
  <img src="https://peach.blender.org/wp-content/uploads/bbb-splash.png?x11217" class="overlayImage" width="320" />
    <video class="thevideo" loop muted poster="https://peach.blender.org/wp-content/uploads/bbb-splash.png?x11217">
        <source src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4" type="video/mp4">
    </video>
</div>

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

I hope this updated code help you

Answer 2

$(document).ready(function() {
  $('.video').each(function(i, obj) {
    $(this).on("mouseover", hoverVideo);
    $(this).on("mouseout", hideVideo);
  });
});

function hoverVideo() {
  $(this).find(".overlayImage").hide();
  $(this).find(".thevideo")[0].play();
}

function hideVideo(video) {
  $(this).find(".thevideo")[0].currentTime = 0;
  $(this).find(".thevideo")[0].pause();
  $(this).find(".overlayImage").show();
}

* {
  font-family: sans-serif
}

.video {
  position: relative;
  width: 320px;
}

.overlayImage {
  position: absolute;
}

<div class="video">
  <img src="https://peach.blender.org/wp-content/uploads/bbb-splash.png?x11217" class="overlayImage" width="320" />
  <video class="thevideo" loop muted poster="https://peach.blender.org/wp-content/uploads/bbb-splash.png?x11217">
        <source src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4" type="video/mp4">
    </video>
</div>

<div class="video">
  <img src="http://hdwarena.com/wp-content/uploads/2017/04/Beautiful-Wallpaper.jpg" class="overlayImage" width="320" />
  <video class="thevideo" loop muted poster="https://peach.blender.org/wp-content/uploads/bbb-splash.png?x11217">
        <source src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4" type="video/mp4">
    </video>
</div>


<div class="video">
  <img src="https://d2v9y0dukr6mq2.cloudfront.net/video/thumbnail/rWaXO67Bipm9mgo7/videoblocks-4k-footage-disco-lights-as-an-abstract-colored-animated-background-or-wallpaper-light-leaks_sl5jole0z_thumbnail-small01.jpg" class="overlayImage" width="320" />
  <video class="thevideo" loop muted poster="https://peach.blender.org/wp-content/uploads/bbb-splash.png?x11217">
        <source src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4" type="video/mp4">
    </video>
</div>

<div class="video">
  <img src="https://d2v9y0dukr6mq2.cloudfront.net/video/thumbnail/BxWKHw2nWj8nx9c2x/videoblocks-red-wallpaper-slider_rxlvi6ltb_thumbnail-small11.jpg" class="overlayImage" width="320" />
  <video class="thevideo" loop muted poster="https://peach.blender.org/wp-content/uploads/bbb-splash.png?x11217">
        <source src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4" type="video/mp4">
    </video>
</div>


<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

In this, every video is separate from each other, allow me to explain why:

1. I changed the way you set the functions for the events mouseover and mouseout and now they are event functions.
2. Inside the functions hoverVideo() and hideVideo(), we hide the image and play the video using $(this) which is passed through the $.on() as the correspondent video div and find the elements (video and image) with $.find().
3. Optional: I added the width:320px in the css because it was somewhat annoying that it continued playing the video outside of the video because of the bigger width.

If you want you can get rid of the class tags, and use the $.find() function like this, for example:

$(this).find("video")[0].currentTime = 0;
$(this).find("video")[0].pause();
$(this).find("img").show();

In this way it will find every video element inside the div with the .video class and do the rest from there, the same for img.

I hope this code helps you.