Can anyone help me modify this code so that a video plays only when hovering over it, and stops playing once the hover ends? What changes should I make to the JavaScript portion of the code for this functionality?
<div class="padding-box height-40">
<div>
<div class="media_link_overlay" id="video-home"></div>
</div>
<div class="background">
<div class="content">
<div class="text">
<video id="video-hover" width="100%" height="100%" preload="auto" onMouseover="mouseoversound.playclip()">
<source type="video/mp4" src="<?php echo get_template_directory_uri().'/videos/homepage_thx.mp4';?>" />
</video>
</div>
</div>
<script>
$("#video-home").hover(function(){
$("#video-home")[0].play();
});
</script>