Change to video

src/css/video.css

@@ -0,0 +1,33 @@
+/* .video-container {
+    height: 100vh;
+    overflow: hidden;
+} */
+.video-container {
+    height: 100vh;
+    overflow: hidden;
+}
+  
+@media (orientation: landscape) {
+    .video-container {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 100%;
+        height: 100%;
+    }
+}
+  
+.video-container video {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+
+    pointer-events: none;
+    -webkit-media-controls: none;
+    -webkit-media-controls-play-button: none;
+    -webkit-media-controls-timeline: none;
+    -webkit-media-controls-current-time-display: none;
+    -webkit-media-controls-time-remaining-display: none;
+    -webkit-media-controls-toggle-closed-captions-button: none;
+}

src/main.jsx

@@ -8,7 +8,7 @@ import WarningPage from './pages/warningPage.jsx';
 import NamePage from './pages/namePage.jsx';
 import Animation from './pages/components/animation.jsx';
 import IntroductionPage from './pages/introductionPage.jsx';
-
+import PlayVideo from './pages/components/playVideo.jsx'
 
 createRoot(document.getElementById('root')).render(
   <StrictMode>
@@ -18,6 +18,7 @@ createRoot(document.getElementById('root')).render(
         <Route path="/warn" element={<WarningPage />} />
         <Route path="/name" element={<NamePage />} />
         <Route path="/sprite" element={<Animation />} />
+        <Route path='/video' element={<PlayVideo />} />
         <Route path="/introduction" element={<IntroductionPage />} />
 
         <Route path="*" element={<Navigate to="/" replace />} />

src/pages/components/playVideo.jsx

@@ -0,0 +1,27 @@
+import '../../css/video.css'
+
+function PlayVideo({ src="hallway_FFF.mp4" })  {
+    const urlSource = `${import.meta.env.VITE_ASSETS_URL}/${src}`;
+
+    return(
+        <div className="video-container">
+            <video
+                autoPlay
+                muted
+                controls="none"
+                playsInline
+                loop
+                pointerEvents="none"
+                onLoadedData={(e) => {
+                    e.target.play()
+                    console.log("played");
+                }}
+            >
+                <source src={urlSource} type="video/mp4"/>
+                Your browser does not support the video tag.
+            </video>
+        </div>
+    )
+}
+  
+export default PlayVideo

src/pages/introductionPage.jsx

@@ -2,6 +2,7 @@ import { useState } from 'react'
 import '../css/global.css'
 import BlackButton from './components/customButton'
 import Animation from './components/animation.jsx';
+import PlayVideo from './components/playVideo.jsx';
 
 function IntroductionPage() {
   return(
@@ -13,7 +14,7 @@ function IntroductionPage() {
         maxWidth:"100vw",
         flexDirection: 'column',
       }}>
-        <div style={{position:"absolute"}}>
+        {/* <div style={{position:"absolute"}}>
             <Animation src='6_Classroom.zip' animationWidth='100vw'/>
         </div>
         <div style={{position:"absolute"}}>
@@ -30,7 +31,8 @@ function IntroductionPage() {
         </div>
         <div style={{position:"absolute"}}>
             <Animation src='1_NPC+pillar.zip' animationWidth='100vw'/>
-        </div>
+        </div> */}
+        <PlayVideo src='hallway_FFF.mp4'/>
         
         <div style={{
             position: "fixed",