Impl LoadImage for iPhone because apple.

src/css/video.css

@@ -44,4 +44,39 @@ video::-webkit-media-controls {
     -webkit-media-controls-current-time-display: none;
     -webkit-media-controls-time-remaining-display: none;
     -webkit-media-controls-toggle-closed-captions-button: none;
+}
+
+.image-container {
+    position: fixed;
+    top: 50%;
+    left: 0;
+    transform: translateY(-50%);
+    width: 100%;
+    height: 100vh;
+    overflow: hidden;
+}
+
+@media only screen and (max-device-width: 600px) {
+    .image-container.middle {
+        width: 200%;
+        height: 150vh;
+        left: 0%;
+    }
+    .image-container.left {
+        width: 300%;
+        left: 0%;
+    }
+    .image-container.right {
+        width: 200%;
+        left: -100%;
+    }
+}
+
+.image-container img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+
+    pointer-events: none;
+    user-select: none;
 }

src/pages/components/loadImage.jsx

@@ -0,0 +1,13 @@
+import '../../css/video.css';
+
+function Image({ src = "hallway_MMM.mp4" ,side = "middle", alt = "this is a video" }) {
+    const urlSource = `${import.meta.env.VITE_ASSETS_URL}/${src}`;
+
+    return (
+        <div className={`image-container ${side}`}>
+            <img src={urlSource} alt={alt}/>
+        </div>
+    );
+}
+
+export default Image;

src/pages/introductionPage.jsx

@@ -2,6 +2,7 @@ import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import '../css/global.css';
 import PlayVideo from './components/playVideo.jsx';
+import LoadImage from './components/loadImage.jsx';
 import LoadingScene from './components/loadingScene.jsx';
 import IntroductionData from './components/introductionData.jsx';
 import SelectionCharacter from './components/selectionCharacter.jsx';
@@ -9,7 +10,7 @@ import Character from './class/character.jsx';
 
 function IntroductionPage() {
     const navigate = useNavigate();
-    const [loading, setLoading] = useState(true);
+    const [loading, setLoading] = useState(false);
     const [isClickedIntroduction, setIsClickedIntroduction] = useState(false);
     const [numChar, setNumChar] = useState(1);
     const character = new Character();
@@ -34,6 +35,23 @@ function IntroductionPage() {
         return sessionStorage.getItem("lang") || 'English';
     });
 
+    const userAgent = navigator.userAgent;
+    const isSafari = userAgent.includes("iPhone"); // safari piss me off so bad omg
+
+    const videoElement = isSafari ? (
+        <LoadImage
+            src='bg-hallway.png'
+            side={character.position(numChar)}
+            onVideoReady={handleVideoReady}
+        />
+    ) : (
+        <PlayVideo
+            src='hallway_FFF.mp4'
+            side={character.position(numChar)}
+            onVideoReady={handleVideoReady}
+        />
+    );
+
     const handleClickedButton = () => {
         console.log(character.name(numChar))
         if(character.name(numChar)=='Porsche') navigate(`/vs/Porsche/${lang}/0`);
@@ -57,11 +75,7 @@ function IntroductionPage() {
                     />
                 )
             )}
-            <PlayVideo
+            {videoElement}
-                src='hallway_FFF.mp4'
-                side={character.position(numChar)}
-                onVideoReady={handleVideoReady}
-            />
         </div>
     );
 }