feat: inline play Hero videos (#255)

* fix: inline videos play * fix typo * add poster
safe-global · Dec 18, 2023 · 59f6fdf · 59f6fdf
1 parent 173c225
commit 59f6fdf
Show file tree

Hide file tree

Showing 15 changed files with 13 additions and 12 deletions.
diff --git a/public/images/aa-sdk.png → public/images/Core/aa-sdk.png b/public/images/aa-sdk.png → public/images/Core/aa-sdk.png
diff --git a/public/images/intro-chip.png → public/images/Core/intro-chip.png b/public/images/intro-chip.png → public/images/Core/intro-chip.png
diff --git a/public/videos/aa-sdk-mobile.hevc.mp4 → public/videos/Core/aa-sdk-mobile.hevc.mp4 b/public/videos/aa-sdk-mobile.hevc.mp4 → public/videos/Core/aa-sdk-mobile.hevc.mp4
diff --git a/public/videos/aa-sdk-mobile.webm → public/videos/Core/aa-sdk-mobile.webm b/public/videos/aa-sdk-mobile.webm → public/videos/Core/aa-sdk-mobile.webm
diff --git a/public/videos/aa-sdk.hevc.mp4 → public/videos/Core/aa-sdk.hevc.mp4 b/public/videos/aa-sdk.hevc.mp4 → public/videos/Core/aa-sdk.hevc.mp4
diff --git a/public/videos/aa-sdk.webm → public/videos/Core/aa-sdk.webm b/public/videos/aa-sdk.webm → public/videos/Core/aa-sdk.webm
diff --git a/public/videos/intro-chip.hevc.mp4 → public/videos/Core/intro-chip.hevc.mp4 b/public/videos/intro-chip.hevc.mp4 → public/videos/Core/intro-chip.hevc.mp4
diff --git a/public/videos/intro-chip.webm → public/videos/Core/intro-chip.webm b/public/videos/intro-chip.webm → public/videos/Core/intro-chip.webm
diff --git a/public/videos/safe-logo.mp4 → public/videos/Home/safe-logo.mp4 b/public/videos/safe-logo.mp4 → public/videos/Home/safe-logo.mp4
diff --git a/public/videos/aa-sdk-mobile.mp4 b/public/videos/aa-sdk-mobile.mp4
diff --git a/public/videos/aa-sdk.mp4 b/public/videos/aa-sdk.mp4
diff --git a/public/videos/intro-chip.mp4 b/public/videos/intro-chip.mp4
diff --git a/src/components/Core/AASdk/index.tsx b/src/components/Core/AASdk/index.tsx
@@ -32,14 +32,16 @@ const AASdk = ({ title, caption, text, link }: BaseBlock) => {
           )}
         </Grid>
         <div className={css.videoWrapper}>
-          <video autoPlay muted loop className={css.video}>
-            <source src={isSmallScreen ? '/videos/aa-sdk-mobile.webm' : '/videos/aa-sdk.webm'} type="video/webm" />
+          <video autoPlay muted playsInline loop className={css.video}>
             <source
-              src={isSmallScreen ? '/videos/aa-sdk-mobile.hevc.mp4' : '/videos/aa-sdk.hevc.mp4'}
+              src={isSmallScreen ? '/videos/Core/aa-sdk-mobile.webm' : '/videos/Core/aa-sdk.webm'}
+              type="video/webm"
+            />
+            <source
+              src={isSmallScreen ? '/videos/Core/aa-sdk-mobile.hevc.mp4' : '/videos/Core/aa-sdk.hevc.mp4'}
               type="video/mp4"
             />
-            <source src={isSmallScreen ? '/videos/aa-sdk-mobile.mp4' : '/videos/aa-sdk.mp4'} type="video/mp4" />
-            <img src="/images/aa-sdk.png" alt="AA SDK Overview" />
+            <img src="/images/Core/aa-sdk.png" alt="AA SDK Overview" />
           </video>
           <a className={clsx(css.videoLink, css.authKitLink)} href={AUTH_KIT_LINK} target="_blank" rel="noreferrer">
             Auth Kit

diff --git a/src/components/Core/Intro/index.tsx b/src/components/Core/Intro/index.tsx
@@ -22,11 +22,10 @@ const CoreIntro = ({ title, text, link, scroll }: BaseBlock & { scroll?: { title
         alignItems="center"
       >
         <Grid item md={6} display="flex" justifyContent="center">
-          <video autoPlay muted loop className={css.video}>
-            <source src="/videos/intro-chip.webm" type="video/webm" />
-            <source src="/videos/intro-chip.hevc.mp4" type="video/mp4" />
-            <source src="/videos/intro-chip.mp4" type="video/mp4" />
-            <img src="/images/intro-chip.png" alt="Core Chip" />
+          <video autoPlay muted playsInline loop poster="/images/Core/intro-chip.png" className={css.video}>
+            <source src="/videos/Core/intro-chip.webm" type="video/webm" />
+            <source src="/videos/Core/intro-chip.hevc.mp4" type="video/mp4" />
+            <img src="/images/Core/intro-chip.png" alt="Core Chip" />
           </video>
         </Grid>
         <Grid item md={6}>

diff --git a/src/components/Home/Intro/index.tsx b/src/components/Home/Intro/index.tsx
@@ -19,8 +19,8 @@ const Intro = ({ title, text, buttons }: BaseBlock) => {
           </Grid>
         </Grid>
         <div className={css.filter}>
-          <video autoPlay muted loop className={css.video}>
-            <source src="/videos/safe-logo.mp4" type="video/mp4" />
+          <video autoPlay muted playsInline loop className={css.video}>
+            <source src="/videos/Home/safe-logo.mp4" type="video/mp4" />
           </video>
           <div className={css.frame} />
         </div>