JSFiddle - React, Tailwind, and code Playground

by RoryMcCrossan

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) {
	let _this = this;
  $('.cases__item-video', _this).get(0).play();
}

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