Skip to content

Commit 14518ba

Browse files
committed
fix: fix the alignment of the video
1 parent 729301c commit 14518ba

File tree

1 file changed

+8
-4
lines changed

1 file changed

+8
-4
lines changed

index.html

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -174,16 +174,20 @@
174174
}
175175

176176
const container = document.getElementById("loading-media");
177+
container.style.display = "flex";
178+
container.style.justifyContent = "center";
179+
container.style.alignItems = "center";
180+
container.style.width = "100%";
177181

178182
if (lang === "ja") {
179183
container.innerHTML = `
180-
<div class="media-wrapper" style="width: 100%; max-width: 800px; aspect-ratio: 16/9; position: relative;">
181-
<img src="loading-animation-ja.svg" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain;" alt="Loading animation" />
184+
<div class="media-wrapper" style="width: 100%; aspect-ratio: 16/9; display: flex; justify-content: center; align-items: center;">
185+
<img src="loading-animation-ja.svg" style="width: 100%; height: 100%; object-fit: contain;" alt="Loading animation" />
182186
</div>`;
183187
} else {
184188
container.innerHTML = `
185-
<div class="media-wrapper" style="width: 100%; max-width: 800px; aspect-ratio: 16/9; position: relative;">
186-
<video loop autoplay muted playsinline style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain;">
189+
<div class="media-wrapper" style="width: 100%; aspect-ratio: 16/9; display: flex; justify-content: center; align-items: center;">
190+
<video loop autoplay muted playsinline style="width: 100%; height: 100%; object-fit: contain;">
187191
<source src="loading-animation.webm" type="video/webm">
188192
<source src="loading-animation.mp4" type="video/mp4">
189193
</video>

0 commit comments

Comments
 (0)