fix: fix the alignment of the video

sugarlabs · Feb 12, 2025 · 14518ba · 14518ba
1 parent 729301c
commit 14518ba
Showing 1 changed file with 8 additions and 4 deletions.
diff --git a/index.html b/index.html
@@ -174,16 +174,20 @@
                     }
 
                     const container = document.getElementById("loading-media");
+                    container.style.display = "flex";
+                    container.style.justifyContent = "center";
+                    container.style.alignItems = "center";
+                    container.style.width = "100%";
 
                     if (lang === "ja") {
                         container.innerHTML = `
-                            <div class="media-wrapper" style="width: 100%; max-width: 800px; aspect-ratio: 16/9; position: relative;">
-                                <img src="loading-animation-ja.svg" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain;" alt="Loading animation" />
+                             <div class="media-wrapper" style="width: 100%; aspect-ratio: 16/9; display: flex; justify-content: center; align-items: center;">
+                                <img src="loading-animation-ja.svg" style="width: 100%; height: 100%; object-fit: contain;" alt="Loading animation" />
                             </div>`;
                     } else {
                         container.innerHTML = `
-                            <div class="media-wrapper" style="width: 100%; max-width: 800px; aspect-ratio: 16/9; position: relative;">
-                                <video loop autoplay muted playsinline style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain;">
+                             <div class="media-wrapper" style="width: 100%; aspect-ratio: 16/9; display: flex; justify-content: center; align-items: center;">
+                                <video loop autoplay muted playsinline style="width: 100%; height: 100%; object-fit: contain;">
                                     <source src="loading-animation.webm" type="video/webm">
                                     <source src="loading-animation.mp4" type="video/mp4">
                                 </video>