preload in homepage

src/pages/homePage.jsx

@@ -1,25 +1,48 @@
-import { useState } from 'react'
+import { useEffect } from 'react';
-import '../css/global.css'
+import '../css/global.css';
-import BlackButton from './components/customButton'
+import BlackButton from './components/customButton';
 
 function HomePage() {
+  useEffect(() => {
+    const controller = new AbortController();
 
+    const fetchVideo = async () => {
+      try {
+        const res = await fetch(`${import.meta.env.VITE_ASSETS_URL}/hallway_FFF.mp4`, {
+          signal: controller.signal,
+          cache: 'force-cache', // Helps to ensure the response is stored
+        });
 
-  return(
+        // Read the response into memory (helps trigger caching)
-  	  <div style={{
+        await res.blob();
-        display: 'flex',
+        console.log('Video prefetched successfully.');
-        justifyContent: 'center',
+      } catch (err) {
-        alignItems: 'center',
+        if (err.name !== 'AbortError') {
-        height: '100vh',
+          console.error('Video prefetch failed:', err);
-        flexDirection: 'column',
+        }
-      }}>
+      }
-        <label className='title'>Fifty Shades <br /> of Bully</label>
+    };
 
-        <div style={{ height: '8vh' }}/>
+    fetchVideo();
 
-        <BlackButton text="Start" to='/warn'/>
+    return () => controller.abort();
-  	  </div>
+  }, []);
-  )
+
+  return (
+    <div style={{
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      height: '100vh',
+      flexDirection: 'column',
+    }}>
+      <label className='title'>Fifty Shades <br /> of Bully</label>
+
+      <div style={{ height: '8vh' }} />
+
+      <BlackButton text="Start" to='/warn' />
+    </div>
+  );
 }
 
-export default HomePage
+export default HomePage;

src/pages/introductionPage.jsx

@@ -15,7 +15,6 @@ function IntroductionPageData(){
         maxWidth:"100vw",
         flexDirection: 'column',
       }}>
-        {/* <PlayVideo src='hallway_FFF.mp4'/> */}
         
         <div style={{
             position: "fixed",