diff --git a/src/components/sections/about/hero/hero.module.scss b/src/components/sections/about/hero/hero.module.scss
index baeec34..7ddf957 100644
--- a/src/components/sections/about/hero/hero.module.scss
+++ b/src/components/sections/about/hero/hero.module.scss
@@ -15,8 +15,10 @@
 
   .video_container {
     position: relative;
-    display: flex;
-    width: 100%;
+    align-self: center;
+    width: 102%;
+    margin-top: tovw(-165px, 'default');
+    padding-top: tovw(30px, 'default', 20px);
     mix-blend-mode: lighten;
 
     video {
diff --git a/src/components/sections/products/hero/hero.module.scss b/src/components/sections/products/hero/hero.module.scss
index cb1a9cb..e0defa7 100644
--- a/src/components/sections/products/hero/hero.module.scss
+++ b/src/components/sections/products/hero/hero.module.scss
@@ -21,8 +21,10 @@
   }
 
   .video_container {
+    align-self: center;
     position: relative;
-    margin: auto;
+    margin-top: tovw(-165px, 'default');
+    padding-top: tovw(30px, 'default', 20px);
     width: 82%;
     mix-blend-mode: lighten;
 
diff --git a/src/pages/about.tsx b/src/pages/about.tsx
index ea63d35..a140b3a 100644
--- a/src/pages/about.tsx
+++ b/src/pages/about.tsx
@@ -39,7 +39,12 @@ const About = ({
 }: InferGetStaticPropsType<typeof getStaticProps>) => {
   return (
     <PageLayout>
-      <Meta preload={[{ href: '/videos/hero-about.mp4', as: 'fetch' }]} />
+      <Meta
+        preload={[
+          { href: '/videos/banner-about.mp4', as: 'fetch' },
+          { href: '/videos/banner-about.webm', as: 'fetch' }
+        ]}
+      />
       <Hero />
       <Team />
       <Related data={initialBlogPosts?.data} />
diff --git a/src/pages/community.tsx b/src/pages/community.tsx
index 45c2a80..0bafb7a 100644
--- a/src/pages/community.tsx
+++ b/src/pages/community.tsx
@@ -9,7 +9,12 @@ import { Page } from './_app'
 const Community: Page = () => {
   return (
     <PageLayout>
-      <Meta preload={[{ href: '/videos/banner-community.mp4', as: 'fetch' }]} />
+      <Meta
+        preload={[
+          { href: '/videos/banner-community.mp4', as: 'fetch' },
+          { href: '/videos/banner-community.webm', as: 'fetch' }
+        ]}
+      />
       <Hero />
       <Events />
       <Socials />
diff --git a/src/pages/products.tsx b/src/pages/products.tsx
index 2038b21..ee70bf6 100644
--- a/src/pages/products.tsx
+++ b/src/pages/products.tsx
@@ -43,7 +43,12 @@ const Products = ({
 }: InferGetStaticPropsType<typeof getStaticProps>) => {
   return (
     <PageLayout>
-      <Meta preload={[{ href: '/videos/banner_products.mp4', as: 'fetch' }]} />
+      <Meta
+        preload={[
+          { href: '/videos/banner-products.mp4', as: 'fetch' },
+          { href: '/videos/banner-products.webm', as: 'fetch' }
+        ]}
+      />
       <Hero />
       <Watchers />
       <Stack />