npm : 
npm i react-hover-video-player 
import : 
import HoverVideoPlayer from '@/components/ui/HoverVideoPlayer';
import : scss
import "@/assets/scss/components/hoverplayvideo.scss";
component :  react-hover-video-player

component : default
<div className="video-hover-wrapper">
     <HoverVideoPlayer
            videoSrc="https://www.w3schools.com/html/mov_bbb.mp4"
            pausedOverlay={
                  <img
                        src="/img/static/logo.png"
                        alt="logo"
                        width={200}
                        height={150}
                        style={{
                              width: '100%',
                              height: '100%',
                              objectFit: 'cover',
                        }}
                  />
            }
            loadingOverlay={
                  <div className="loading-overlay">
                        <div className="loading-spinner"></div>
                  </div>
            }
     />
</div>