docs updates

Author: code-forge-temple

docs/src/components/YouTubePreview/YouTubePreview.tsx

@@ -34,7 +34,7 @@ export function YouTubePreview ({url}: YouTubePreviewProps) {
                 className="youtube-preview-link"
             >
                 <img
-                    src={`https://img.youtube.com/vi/${videoId}/hqdefault.jpg`}
+                    src={`https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`}
                     alt="Watch on YouTube"
                     className="youtube-preview-img"
                 />

docs/src/components/YouTubePreview/style.css

@@ -2,16 +2,19 @@
     display: flex;
     justify-content: center;
     margin: 2rem 0;
+    padding: 0 1rem;
 }
 
 .youtube-preview-link {
     position: relative;
     display: inline-block;
+    max-width: 100%;
 }
 
 .youtube-preview-img {
     width: 720px;
-    height: 405px;
+    max-width: 100%;
+    height: auto;
     cursor: pointer;
     border-radius: 8px;
     display: block;
@@ -27,4 +30,22 @@
     display: flex;
     align-items: center;
     justify-content: center;
+}
+
+@media screen and (max-width: 768px) {
+    .youtube-preview-container {
+        margin: 1rem 0;
+    }
+
+    .youtube-preview-play svg {
+        width: 48px;
+        height: 34px;
+    }
+}
+
+@media screen and (max-width: 480px) {
+    .youtube-preview-play svg {
+        width: 40px;
+        height: 28px;
+    }
 }