diff --git a/.gitignore b/.gitignore
index b2d6de3..1e90b64 100644
--- a/.gitignore
+++ b/.gitignore
@@ -14,6 +14,7 @@
 .env.development.local
 .env.test.local
 .env.production.local
+.idea/
 
 npm-debug.log*
 yarn-debug.log*
diff --git a/src/pages/index.module.css b/src/pages/index.module.css
index 5562c07..a788028 100644
--- a/src/pages/index.module.css
+++ b/src/pages/index.module.css
@@ -10,7 +10,13 @@
   overflow: hidden;
 }
 
-@media screen and (max-width: 996px) {
+.ytEmbed {
+  max-width: 100%;
+  aspect-ratio: 16/9;
+  height: auto;
+}
+
+@media screen and (min-width: 720px) and (max-width: 996px) {
   .heroBanner {
     padding: 2rem;
   }
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 2d553da..cd74dd3 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -16,7 +16,7 @@ function HomepageHeader() {
           {siteConfig.title}
         </Heading>
         <p className="hero__subtitle">Articles, guides, tips and tricks from and for frogs and forgis of the Graphics Programming discord.<br />This is what we do</p>
-        <iframe width="960" height="520" src="https://www.youtube.com/embed/E07I1VRYlcg?si=PUsHfqq3YKLIp2kS" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+        <iframe className={styles.ytEmbed} width="960" height="520" src="https://www.youtube.com/embed/E07I1VRYlcg?si=PUsHfqq3YKLIp2kS" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
         <div className={styles.buttons}>
           <Link
             className="button button--secondary button--lg test"