How to play/pause video on hover over another block (jQuery)?

Question

css

there is a page, both halves of it have a video background. to be precise, this new.volna.dance is

needed to start playing the video that the cursor is hovering over. originally did this:

$(".hustlevideo").mouseover(function(){ 
$this.play(); 
});
$(".hustlevideo").mouseout(function(){ 
$this.pause(); 
});

but there was a problem - when you hover over a block that is located on top of the video, it, of course, stops.

moved the handler to the parent block, in which all the content is located, this is what happened:

$("#hustle").mouseover(function(){
$(".hustlevideo").play();
});
$("#hustle").mouseout(function(){
$(".hustlevideo").pause();
});

and now
I'm getting Uncaught TypeError errors: $(...).play is not a function and $(...).pause is not a function

What am I doing wrong and what should I do to make it work?

Answer 1

It's not entirely clear, but maybe you just don't have enough block height? And isn't it easier to make a dropdown menu using js?

Answer 2

Instead of mouseover / mouseout use mouseenter / mouseleave.

$(...).play is not a function and $(...).pause is not a function
What am I doing wrong... ?

So you are trying to call the play() and pause() methods on a jQuery object.
Try $(...)[0].play()