JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" class="cases__item">
   <video class="cases__item-video" playsinline="true" loop="" preload="metadata" src="https://giant.gfycat.com/VerifiableTerrificHind.mp4"></video>
</a>

<a href="#" class="cases__item">
   <video class="cases__item-video" playsinline="true" loop="" preload="metadata" src="https://giant.gfycat.com/VerifiableTerrificHind.mp4"></video>
</a>

<a href="#" class="cases__item">
   <video class="cases__item-video" playsinline="true" loop="" preload="metadata" src="https://giant.gfycat.com/VerifiableTerrificHind.mp4"></video>
</a>

JavaScript

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

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

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