fix: videos

src/components/common/footer/index.tsx

@@ -55,6 +55,7 @@ export const Footer = () => {
             controls={false}
             loop
             muted
+            playsInline={true}
             preload="true"
           >
             <source src="/videos/hero-grid.mp4" type="video/mp4" />

src/components/sections/404/hero/index.tsx

@@ -16,6 +16,7 @@ const Hero = () => {
         controls={false}
         loop
         muted
+        playsInline={true}
         preload="true"
       >
         <source src="/videos/hero-grid.mp4" type="video/mp4" />

src/components/sections/about/hero/index.tsx

@@ -11,7 +11,14 @@ const Hero = () => {
   return (
     <Section className={s['section']}>
       <div className={s['gradient']} />
-      <video autoPlay muted loop>
+      <video
+        autoPlay
+        controls={false}
+        loop
+        muted
+        playsInline={true}
+        preload="true"
+      >
         <source src="/videos/hero-about.mp4" type="video/mp4" />
       </video>
       <Container className={s['container']}>

src/components/sections/community/hero/hero.module.scss

@@ -33,6 +33,9 @@
 
   video {
     width: tovw(1750px, 'default', 800px);
+    user-select: none;
+    pointer-events: none;
+    z-index: -1;
 
     @include respond-to('mobile') {
       width: tovw(600px, 'mobile');

src/components/sections/community/hero/index.tsx

@@ -11,7 +11,14 @@ const Hero = () => {
     <Section className={s['section']}>
       <div className={s['gradient']}></div>
       <div className={s['video__container']}>
-        <video autoPlay controls={false} loop muted preload="true">
+        <video
+          autoPlay
+          controls={false}
+          loop
+          muted
+          playsInline={true}
+          preload="true"
+        >
           <source src="/videos/banner-community.mp4" type="video/mp4" />
         </video>
       </div>

src/components/sections/homepage/hero/index.tsx

@@ -18,6 +18,7 @@ const Hero = () => {
         controls={false}
         loop
         muted
+        playsInline={true}
         preload="true"
       >
         <source src="/videos/hero-grid.mp4" type="video/mp4" />

src/components/sections/products/app/index.tsx

@@ -16,6 +16,7 @@ const AppSection = () => {
         controls={false}
         loop
         muted
+        playsInline={true}
         preload="true"
       >
         <source src="/videos/hero-grid.mp4" type="video/mp4" />

src/components/sections/products/hero/index.tsx

@@ -9,7 +9,14 @@ const Hero = () => {
   return (
     <Section className={s['section']}>
       <div className={s.gradient} />
-      <video autoPlay muted loop preload="true">
+      <video
+        autoPlay
+        controls={false}
+        loop
+        muted
+        playsInline={true}
+        preload="true"
+      >
         <source src="/videos/banner_products.mp4" type="video/mp4" />
       </video>
       <Container className={s['container']}>