youtobe video added

components/video.tsx

@@ -1,4 +1,5 @@
 import { useLanguage } from "@/contexts/language-context"
+import { toEmbedUrl } from "@/lib/embedUrl";
 import { Play } from "lucide-react"
 
 export default function Video() {
@@ -11,15 +12,21 @@ export default function Video() {
           <p className="text-lg text-muted-foreground">{t.action.subtitle}</p>
         </div>
 
-        <div className="relative w-full aspect-video bg-muted rounded-2xl border border-border overflow-hidden group cursor-pointer">
-          <div className="w-full h-full bg-gradient-to-br from-primary/20 via-primary/5 to-background flex items-center justify-center">
-            <div className="absolute inset-0 flex items-center justify-center">
-              <div className="bg-primary rounded-full p-4 group-hover:scale-110 transition-transform duration-300 shadow-lg">
-                <Play size={32} className="text-white fill-white" />
-              </div>
-            </div>
-          </div>
+        {/* YouTube video bo‘limi */}
+        <section className="flex justify-center mb-10">
+          <div className="w-full max-w-3xl aspect-video">
+            <iframe
+              className="w-full h-full rounded-lg shadow-lg"
+              src={toEmbedUrl(
+                'https://youtu.be/jorvR31QgnA?si=fX_CjYwxfUwFZAgY',
+              )}
+              title="Pedagogik yangilanish video"
+              frameBorder="0"
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+              allowFullScreen
+            ></iframe>
           </div>
+        </section>
       </div>
     </section>
   )

lib/embedUrl.ts

@@ -0,0 +1,22 @@
+
+export function toEmbedUrl(url: string): string {
+  let videoId = '';
+
+  // watch?v=...
+  if (url.includes('watch?v=')) {
+    const params = new URL(url).searchParams;
+    videoId = params.get('v') || '';
+  }
+  // youtu.be/...
+  else if (url.includes('youtu.be/')) {
+    const pathname = new URL(url).pathname; // /videoId
+    videoId = pathname.split('/')[1] || '';
+  }
+  // shorts/...
+  else if (url.includes('youtube.com/shorts/')) {
+    const pathname = new URL(url).pathname; // /shorts/videoId
+    videoId = pathname.split('/')[2] || '';
+  }
+
+  return videoId ? `https://www.youtube.com/embed/${videoId}` : '';
+}