styles: mobile

safe-global · Nov 8, 2024 · 1bb6ea3 · 1bb6ea3
1 parent 741efd2
commit 1bb6ea3
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 8 deletions.
diff --git a/src/components/Teaser/Video/index.tsx b/src/components/Teaser/Video/index.tsx
@@ -32,21 +32,28 @@ const Video = (): ReactElement => {
           poster="/images/Teaser/poster.png"
           autoPlay
           muted
-          // playsInline
+          playsInline
           ref={videoRef}
           style={{ opacity: 0 }}
           onEnded={handleVideoEnd}
           className={`${css.video} ${ready ? css.ready : ''}`}
         >
-          <source src="/videos/Teaser/Teaser.webm" type="video/webm" />
           {/* TODO: Replace by Teaser_with_logo.mp4 */}
           <source src="/videos/Teaser/Teaser.mp4" type="video/mp4" />
+          <source src="/videos/Teaser/Teaser.webm" type="video/webm" />
         </video>
       </div>
       <div className={`${css.imageWrapper} ${showButton ? css.visible : ''}`}>
-        <ButtonBase target="_blank" rel="noreferrer" href={ALPHA_TELEGRAM_LINK} className={css.button}>
-          <img src="/images/Teaser/telegram.svg" alt="Telegram" />
-        </ButtonBase>
+        {ready ? (
+          <ButtonBase
+            target="_blank"
+            rel="noreferrer"
+            href={ALPHA_TELEGRAM_LINK}
+            className={`${css.button} ${showButton ? css.visible : ''}`}
+          >
+            <img src="/images/Teaser/telegram.svg" alt="Telegram" />
+          </ButtonBase>
+        ) : null}
       </div>
     </div>
   )

diff --git a/src/components/Teaser/Video/styles.module.css b/src/components/Teaser/Video/styles.module.css
@@ -3,6 +3,7 @@
   align-items: center;
   position: relative;
   width: 100%;
+  height: 100vh;
 }
 
 .videoWrapper,
@@ -29,7 +30,8 @@
   background-image: url('/images/Teaser/poster.png');
   background-repeat: no-repeat;
   overflow: hidden;
-  background-size: contain;
+  background-size: cover;
+  background-position: center;
   width: 99.6%;
   position: relative;
   left: 0.5px;
@@ -40,7 +42,8 @@
   aspect-ratio: 16 / 9;
 }
 
-.imageWrapper.visible {
+.imageWrapper.visible,
+.button.visible {
   opacity: 1;
   visibility: visible;
 }
@@ -53,13 +56,19 @@
   font-size: 16px;
   cursor: pointer;
   z-index: 1;
+  width: 150%;
+
+  opacity: 0;
+  visibility: hidden;
 }
 
 .video {
   box-sizing: border-box;
   display: block;
   width: 100%;
-  object-fit: contain;
+
+  height: 100vh;
+  object-fit: cover;
 }
 
 .video.ready {
@@ -74,10 +83,19 @@
     margin: 0 auto;
   }
 
+  .imageWrapper {
+    background-size: contain;
+  }
+
+  .button {
+    width: 100%;
+  }
+
   .video {
     position: absolute;
     top: 0;
     left: 0;
+    object-fit: contain;
   }
 }