36 lines
681 B
TypeScript
36 lines
681 B
TypeScript
import { useState } from "react";
|
|
|
|
import { playbackVideo } from '../../data.tsx';
|
|
|
|
const BgVideo = () => {
|
|
const videoSrc = playbackVideo;
|
|
const [loading, setLoading] = useState(true);
|
|
const makeVisible = () => {
|
|
setLoading(false);
|
|
}
|
|
|
|
return (
|
|
<video
|
|
onLoadedData={makeVisible}
|
|
autoPlay
|
|
muted
|
|
loop
|
|
style={{
|
|
position: "fixed",
|
|
minWidth: "100vw",
|
|
minHeight: "100vh",
|
|
left: 0,
|
|
top: 0,
|
|
zIndex: -1,
|
|
opacity: loading ? 0 : 1,
|
|
transition: "opacity, 2s ease-in-out"
|
|
|
|
}}
|
|
>
|
|
<source src={videoSrc} type="video/mp4" />
|
|
</video>
|
|
);
|
|
|
|
}
|
|
|
|
export default BgVideo; |