preload in homepage

src/pages/homePage.jsx

@@ -1,11 +1,34 @@
-import { useState } from 'react'
-import '../css/global.css'
-import BlackButton from './components/customButton'
+import { useEffect } from 'react';
+import '../css/global.css';
+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)
+        await res.blob();
+        console.log('Video prefetched successfully.');
+      } catch (err) {
+        if (err.name !== 'AbortError') {
+          console.error('Video prefetch failed:', err);
+        }
+      }
+    };
+
+    fetchVideo();
+
+    return () => controller.abort();
+  }, []);
+
+  return (
     <div style={{
       display: 'flex',
       justifyContent: 'center',
@@ -15,11 +38,11 @@ function HomePage() {
     }}>
       <label className='title'>Fifty Shades <br /> of Bully</label>
 
-        <div style={{ height: '8vh' }}/>
+      <div style={{ height: '8vh' }} />
 
-        <BlackButton text="Start" to='/warn'/>
+      <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",