diff --git a/src/components/common/footer/index.tsx b/src/components/common/footer/index.tsx
index 0a9b487..a3b2d36 100644
--- a/src/components/common/footer/index.tsx
+++ b/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" />
diff --git a/src/components/sections/404/hero/index.tsx b/src/components/sections/404/hero/index.tsx
index 0805d4d..372c325 100644
--- a/src/components/sections/404/hero/index.tsx
+++ b/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" />
diff --git a/src/components/sections/about/hero/index.tsx b/src/components/sections/about/hero/index.tsx
index 10c8ba9..97d9335 100644
--- a/src/components/sections/about/hero/index.tsx
+++ b/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']}>
diff --git a/src/components/sections/community/hero/hero.module.scss b/src/components/sections/community/hero/hero.module.scss
index a7f95b1..d3ff48e 100644
--- a/src/components/sections/community/hero/hero.module.scss
+++ b/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');
diff --git a/src/components/sections/community/hero/index.tsx b/src/components/sections/community/hero/index.tsx
index a166925..3998e89 100644
--- a/src/components/sections/community/hero/index.tsx
+++ b/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>
diff --git a/src/components/sections/homepage/hero/index.tsx b/src/components/sections/homepage/hero/index.tsx
index 56adf1c..465c118 100644
--- a/src/components/sections/homepage/hero/index.tsx
+++ b/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" />
diff --git a/src/components/sections/products/app/index.tsx b/src/components/sections/products/app/index.tsx
index b6e0f12..2ad3dea 100644
--- a/src/components/sections/products/app/index.tsx
+++ b/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" />
diff --git a/src/components/sections/products/hero/index.tsx b/src/components/sections/products/hero/index.tsx
index 7051353..e5f3e57 100644
--- a/src/components/sections/products/hero/index.tsx
+++ b/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']}>