diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/HeroVideo/HeroVideo.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/HeroVideo/HeroVideo.tsx
index 9141f9c..626294c 100644
--- a/packages/logos-docusaurus-theme/src/client/components/mdx/HeroVideo/HeroVideo.tsx
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/HeroVideo/HeroVideo.tsx
@@ -43,9 +43,20 @@ export const HeroVideo: React.FC<HeroVideoProps> = ({
     await play()
   }
 
-  const onEnded = async () => {
-    await play()
-  }
+  const onEnded = () => play()
+
+  const onLoadedMetadata = () => play()
+
+  useEffect(() => {
+    const root = document.querySelector<HTMLDivElement>('#__docusaurus')
+    if (!root) return
+
+    root.classList.add('overflow-hidden')
+
+    return () => {
+      root.classList.remove('overflow-hidden')
+    }
+  }, [])
 
   return (
     <>
@@ -75,6 +86,7 @@ export const HeroVideo: React.FC<HeroVideoProps> = ({
             autoPlay
             onEnded={onEnded}
             onCanPlay={onCanPlay}
+            onLoadedMetadata={onLoadedMetadata}
             ref={ref}
           >
             {children}
diff --git a/packages/logos-docusaurus-theme/src/client/css/custom.scss b/packages/logos-docusaurus-theme/src/client/css/custom.scss
index ab0824f..f45b728 100644
--- a/packages/logos-docusaurus-theme/src/client/css/custom.scss
+++ b/packages/logos-docusaurus-theme/src/client/css/custom.scss
@@ -1213,7 +1213,7 @@ code {
   overflow: auto;
 }
 
-#__docusaurus {
+.overflow-hidden {
   overflow: hidden;
 }