fix: adjust the height of hero video to fit in its container; fixes #91

acid-info · Jul 7, 2023 · 207c983 · 207c983
1 parent 872b1e7
commit 207c983
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 10 deletions.
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/HeroVideo/HeroVideo.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/HeroVideo/HeroVideo.scss
@@ -4,6 +4,8 @@
   display: grid;
   grid-template-rows: 1fr;
   grid-template-columns: 1fr;
+  position: relative;
+  flex-grow: 1;
 
   pointer-events: none;
 
@@ -22,9 +24,11 @@
 
     transform: translateY(var(--hero-video-offset-y));
 
-    max-width: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
     height: 100%;
-    width: auto;
   }
 
   .mdx-hero-video__placeholder {
@@ -34,11 +38,12 @@
 
   img,
   video {
-    width: 100%;
-    height: auto;
     transform: scale(var(--hero-video-scale));
-    margin-left: calc((var(--hero-video-scale) - 100%) * -1);
-    transform-origin: top left;
+    transform-origin: top center;
+    object-position: top;
+
+    height: 100%;
+    max-width: var(--container-max-width);
   }
 }
 
@@ -64,7 +69,6 @@
     video {
       width: 100%;
       transform: scale(var(--hero-video-scale-mobile));
-      margin-left: calc((var(--hero-video-scale-mobile) - 100%) * -1);
     }
   }
 }
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/HeroVideo/HeroVideo.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/HeroVideo/HeroVideo.tsx
@@ -69,9 +69,9 @@ export const HeroVideo: React.FC<HeroVideoProps> = ({
         style={makeStyle(
           { ...style },
           {
-            'hero-video-scale': desktop?.scale ?? '58%',
-            'hero-video-offset-y': desktop?.offsetY ?? '-10%',
-            'hero-video-scale-mobile': mobile?.scale ?? '117.8%',
+            'hero-video-scale': desktop?.scale ?? '151.5%',
+            'hero-video-offset-y': desktop?.offsetY ?? '-120px',
+            'hero-video-scale-mobile': mobile?.scale ?? '140%',
             'hero-video-offset-y-mobile': mobile?.offsetY ?? '-10%',
           },
         )}