diff --git a/site/src/pages/index.module.css b/site/src/pages/index.module.css
index 52780c95..e0200797 100644
--- a/site/src/pages/index.module.css
+++ b/site/src/pages/index.module.css
@@ -1,5 +1,7 @@
 .video {
+  aspect-ratio: 16/9;
   display: block;
-  max-width: 1400px;
   margin: 4em auto;
+  max-width: 1400px;
+  width: 100%;
 }
diff --git a/site/src/pages/index.tsx b/site/src/pages/index.tsx
index ebd10c08..6c7aa65c 100644
--- a/site/src/pages/index.tsx
+++ b/site/src/pages/index.tsx
@@ -15,11 +15,8 @@ export default function Home(): JSX.Element {
           allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
           allowFullScreen
           className={css.video}
-          frameBorder={0}
-          height={631}
           src="https://www.youtube.com/embed/peJNp8BZ_dE"
           title="Fixing duplicate production dependencies in vercel/turborepo"
-          width={1425}
         ></iframe>
       </main>
     </Layout>