Help Needed

[TiwariAbhishek23]

Hello, I updated this portfolio for my own here is the Link. I want to add a video clip that starts on hover, instead of normal image of my project in Work section, I tried to use this React-hover module but it is not working because of project structure, react-dependencies. I will be thankful if you can guide me for this

[ladunjexa]

Hi AbhishekTiwari23, It's been a while since your issue was published, but I saw on your site that you haven't implemented it yet so I'll share my two cents with you. In my opinion, you don't need to use any 3d party libraries, html video element (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video), onMouseEnter & onMouseLeave event handlers and useRef hook may be sufficient for this.

Here is a basic example of how you should implement this:

const videoRef= useRef(null);
const onMouseEnter = () => ref.current.play();
const onMouseLeave = () => ref.current.pause();

<video ref={videoRef}>
    <source src={source} type='video/mp4' onMouseEnter={onMouseEnter } onMouseLeave={onMouseLeave } />
</video>

Hope this helps you :)

[TiwariAbhishek23]

Hi, I need little help, I updated the code as per the latest update and made the required changes, you can check them here - https://github.com/ladunjexa/reactjs18-3d-portfolio/compare/main...AbhishekTiwari23:tiwariabhishek23:main why after deploying it is becoming like