I want to show a video or Lottie animation for my React Weather App

I am a beginner who is learning react.js and i have made Weather app through React JS Tutorial – Build a Weather App With Cities Autocomplete and now i want to add my lottie animation to appear when a user visits and after the lotties animation goes after 4 seconds then the content of the appilcation appears. Please help me achieve this.


Thank you


I tried to create another component VideoPlayer.jsx and then put the lottie on it and then add variable and used useEffect:
const VideoPlayer = ({ onVideoEnd }) => {
const [videoLoaded, setVideoLoaded] = useState(false);

useEffect(() => {
const handleVideoLoad = () => {
setVideoLoaded(true);
};

const handleVideoEnded = () => {
if (onVideoEnd) {
onVideoEnd();
}
};

const videoElement = document.getElementById('myVideo');
videoElement.addEventListener('loadeddata', handleVideoLoad);
videoElement.addEventListener('ended', handleVideoEnded);

return () => {
videoElement.removeEventListener('loadeddata', handleVideoLoad);
videoElement.removeEventListener('ended', handleVideoEnded);
};
}, [onVideoEnd]);



give it absolute position and z-index of 1000.


In the return i added
{!videoLoaded &&

Loading video...}