Merge pull request #45 from teofum/fix-yt-embed

fixed the homepage yt embed on mobile

Author: deccer

.gitignore

@@ -14,6 +14,7 @@
 .env.development.local
 .env.test.local
 .env.production.local
+.idea/
 
 npm-debug.log*
 yarn-debug.log*

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;
   }

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"