hw7 started, added project info page

site/src/projectDetails/components/BackgroundVideo.tsx

@@ -0,0 +1,36 @@
+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;