fix: layout jump on video loading

src/components/marquee/MarqueeContent.astro

@@ -44,18 +44,21 @@ const videos = [
   {videos.map(({ author, source, installable, path }, index) => {
     return (
       <div class=`marquee-item`>
-        <video
-          data-media-index={index}
-          data-media-author={author}
-          id="showcase-video"
-          class="marquee-item-spacing marquee-item-content"
-          muted
-          controls
-          playsinline
-          preload="metadata"
-        >
-        <source src={path} type="video/mp4"/>
-      </video>
+        <div class="marquee-item-spacing marquee-item-content video-wrapper">
+          <video
+            data-media-index={index}
+            data-media-author={author}
+            id="showcase-video"
+            muted
+            controls
+            playsinline
+            preload="metadata"
+            style="opacity: 0; transition: opacity 0.5s"
+            onloadeddata="this.style.opacity='1'"
+          >
+            <source src={path} type="video/mp4"/>
+          </video>
+        </div>
       <p>
         Configuration by <Fragment set:html={author}/>
         {source && !installable && <>(<a href={source}>source code</a>)</>}

src/styles/components/marquee.css

@@ -67,16 +67,28 @@
   padding-inline: 0.5rem;
   box-sizing: border-box;
   will-change: opacity;
+  width: 100vw;
+  flex: 0 0 100vw;
 
   & > * {
     z-index: 11;
   }
 
-  & video {
+  & .video-wrapper {
     position: relative;
+    width: 100%;
     max-width: 75rem;
+    aspect-ratio: 16 / 9;
 
     box-shadow: var(--shadow-md);
+    background-color: hsl(var(--bg-700));
+    overflow: hidden;
+
+    & video {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
   }
 }
 
@@ -173,9 +185,5 @@
 @media not (min-width: 83rem) {
   .marquee-scroll-arrow {
     height: unset;
-
-    & > div {
-      background-color: #55555580;
-    }
   }
 }