fix: youtube videos not responsive

Author: suvanbanerjee

src/app/_components/markdown-styles.module.css

@@ -69,3 +69,22 @@
   font-family: monospace;
   font-size: 0.875rem;
 }
+
+/* Responsive iframe styles for embedded videos */
+.markdown iframe {
+  max-width: 100%;
+  height: auto;
+  aspect-ratio: 16 / 9;
+  margin-top: 1.5rem;
+  margin-bottom: 1.5rem;
+  border-radius: 0.5rem;
+}
+
+/* For mobile devices, ensure iframe doesn't overflow */
+@media (max-width: 640px) {
+  .markdown iframe {
+    width: 100%;
+    height: auto;
+    aspect-ratio: 16 / 9;
+  }
+}

src/app/globals.css

@@ -31,6 +31,12 @@
   a {
     @apply text-accent hover:text-accent-light transition-colors duration-200;
   }
+
+  /* Make all iframes responsive by default */
+  iframe {
+    max-width: 100%;
+    height: auto;
+  }
 }
 
 @layer components {

src/app/newblog/page.tsx

@@ -141,7 +141,8 @@ export default function Contribute() {
                   </code>
                 </pre>
                 <p className="mb-3">
-                  Replace <code className="bg-mono-100 px-2 py-1 rounded dark:bg-mono-800 dark:text-mono-200">VIDEO_ID</code> with the ID of your YouTube video (found in the YouTube URL after "v=").
+                  Replace <code className="bg-mono-100 px-2 py-1 rounded dark:bg-mono-800 dark:text-mono-200">VIDEO_ID</code> with the ID of your YouTube video (found in the YouTube URL after "v="). 
+                  <strong className="text-green-600 dark:text-green-400"> Note: The video embeds are automatically responsive and will scale properly on mobile devices.</strong>
                 </p>
                 <h4 className="text-lg font-medium mb-2">2. Self-hosted Videos</h4>
                 <p className="mb-3">