Background videos - play/pause on hover, disable autoplay

Design help Custom code
1

Hi!
I want to disable the autoplay on all background videos with the class “video” and instead have these background videos play on hover and pause on hover out. Is there a way to do this for multiple videos with the same class?

I have already try to put this code below in Page Settings > Custom Code > Footer Code, but with no luck:

<script>
var Webflow = Webflow || [];
Webflow.push(function() {
    var figure = $(".video").hover(function() {  
        $('video', this).get(0).play(); 
    }, function() {
        $('video', this).get(0).pause();
    }).each(function() {
        $('video', this).get(0).pause();
    });
});
</script>

Thanks!

Here is my site Read-Only: https://preview.webflow.com/preview/tomas-juricek?utm_medium=preview_link&utm_source=designer&utm_content=tomas-juricek&preview=8e46e2c00ed135443e5831e8ee0e5f80&mode=preview