diff --git a/apps/website/components/HeroSection.vue b/apps/website/components/HeroSection.vue
index b051e8e..28ca789 100644
--- a/apps/website/components/HeroSection.vue
+++ b/apps/website/components/HeroSection.vue
@@ -116,12 +116,12 @@ onMounted(() => {
   const videoHTML = `
     <div id="ios-video-bg" style="
       position: fixed;
-      top: 0;
+      top: calc(-1 * env(safe-area-inset-top, 0px));
       left: 0;
       right: 0;
       bottom: 0;
       width: 100vw;
-      height: 100vh;
+      height: calc(100vh + env(safe-area-inset-top, 0px));
       z-index: -1;
       background: #000;
     ">
@@ -135,7 +135,7 @@ onMounted(() => {
           width: 100%;
           height: 100%;
           object-fit: cover;
-          object-position: center top;
+          object-position: top center;
         ">
         <source src="https://videos.pexels.com/video-files/3571264/3571264-uhd_2560_1440_30fps.mp4" type="video/mp4">
       </video>