doc: fix video overflow

npi-ai · Apr 26, 2024 · 071253f · 071253f
1 parent 6810cd8
commit 071253f
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git a/docs/components/youtube/index.tsx b/docs/components/youtube/index.tsx
@@ -1,16 +1,17 @@
 import YouTube from 'react-youtube';
+import cn from "./style.module.css";
 
 export function YouTubeComponent({videoId}: { videoId: string }) {
     const opts = {
-        height: '360',
+        height: 'auto',
         width: '640',
         playerVars: {
             // https://developers.google.com/youtube/player_parameters
             autoplay: 0,
         },
     };
     return (
-        <YouTube videoId={videoId} opts={opts} />
+        <YouTube className={cn.video} videoId={videoId} opts={opts} />
     );
 }
 
diff --git a/docs/components/youtube/style.module.css b/docs/components/youtube/style.module.css
@@ -0,0 +1,8 @@
+.video {
+  max-width: 100%;
+}
+
+.video iframe {
+  max-width: 100%;
+  aspect-ratio: 16/9;
+}