jQuery - Play video when hover on parent div

Question

I\'m creating a video gallery consisting of thumbnails that play a short video on hover. I\'ve been able to get them to play while hovering over the video itself, but I nee

Answer 1

play is not a jQuery function but a function of the DOM element. You therefore need to call it upon the DOM element.

$(document).ready(function(){
  $(".thumbnail").hover(
    function() {
      $(this).children("video").get(0).play();
    }, function() {
       $(this).children("video").get(0).pause();
        $(this).children("video").get(0).currentTime = 0;
    });
});

Note: get use for getting the native DOM element from the jQuery selection.

Answer 2

The method pay and pause belongs to the dom element(video object), not the jquery object so

$(document).ready(function () {
    $(".thumbnail").hover(function () {
        $(this).children("video")[0].play();
    }, function () {
        var el = $(this).children("video")[0];
        el.pause();
        el.currentTime = 0;
    });
});

$(this).children("video") returns a jQuery object which does not have the pay/pause methods so your code should through an error(unless you have included some plugins which adds those methods).

You can access the underlying dom element by using the index of the child like $(this).children("video")[0] then call those methods on that element.

Answer 3

var figure = $(".video").hover( hoverVideo, hideVideo );

function hoverVideo(e) {  
    $('video', this).get(0).play(); 
}

function hideVideo(e) {
    $('video', this).get(0).pause(); 
}

#videosList {
 max-width: 600px; 
  overflow: hidden;
}

.video {
  background-image: url('https://img.youtube.com/vi/nZcejtAwxz4/maxresdefault.jpg');
  height: 330px;
  width: 600px;
  margin-bottom: 50px;
}

/* Hide Play button + controls on iOS */
video::-webkit-media-controls {
    display:none !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--
Data: https://gfycat.com/cajax/get/VerifiableTerrificHind
 
Source: https://www.youtube.com/watch?v=nZcejtAwxz4

More info on youtube api for thumbnails: http://stackoverflow.com/questions/2068344/how-do-i-get-a-youtube-video-thumbnail-from-the-youtube-api
-->
<div id="videosList">           

<div class="video">
    <video class="thevideo" loop preload="none">
      <source src="https://giant.gfycat.com/VerifiableTerrificHind.mp4" type="video/mp4">
      <source src="https://giant.gfycat.com/VerifiableTerrificHind.webm" type="video/webm">
    Your browser does not support the video tag.
    </video>
  </div>
  Hover mouse over video. Desktop only [ Obviously! ;) ]
</div>

Answer 4

This is a simply awesome answer, and my thanks to you for the solution Aron

Here is some code that I implemented to augment the functionality a little, and my explanation follows:

    <script type = "text/javascript">

    $(document).ready(function () {
        $("#video").css("display", "none"); //HIDE THE VIDEO INITIALLY
        $(".thumbnail").hover(function () 
                {
                $("#video").css("display", "block"); //SHOW THE VIDEO ON HOVER
                    $(this).children("video")[0].play();
                }, 

        function () {
            var el = $(this).children("video")[0];
            el.pause();
            el.currentTime = 0;
        });
    });
</script>

The following hides the video on page load:

$("#video01").css("display", "none");

Once the user hovers over the video casing the following fades it in:

$("#video01").css("display", "block");

where #video is the id of the video tag i.e. :

<video id = "video">

Mine is implemented here.