Video plays on hover BUT make it always play on tablet and below

Design help Custom code
1

No need of a read only link. The script I use works perfectly well.

All I need some help with is adding an exception to it so the video is always playing without the need of a hover on tablets and smaller screens:

<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>

I’m desperate as I don’t understand these. Thank you so much in advance.

2

Add condition based on the screen width

shoud work


var screenWidth = window.innerWidth;

if (screenWidth > 991) {
  // Screen width is over 991
     var figure = $(".video").hover(function() {  
        $('video', this).get(0).play(); 
    }, function() {
        $('video', this).get(0).pause();
    }).each(function() {
        $('video', this).get(0).pause();
    })
} else if (screenWidth <= 991) {
  // Screen width is under 991
var figure = $(".video")
   $('video', this).get(0).play();
}

` you don't need webflow push`