video size

src/app/dmag/components/SingleBlogPage.tsx

@@ -1,6 +1,6 @@
 'use client'
 import { Profile, Calendar, Tag, ExportCurve, Whatsapp, Send2 } from 'iconsax-react'
-import { FC } from 'react'
+import { FC, useEffect } from 'react'
 import Image from 'next/image'
 // import MostVisited from '../components/MostVisited'
 import ContactUs from './ContactUs'
@@ -17,6 +17,35 @@ type Props = {
 const SingleBlogPage: FC<Props> = ({ id }) => {
     const { data, refetch } = useGetBlogSingle(id)
 
+    // تنظیم اندازه iframe ویدیوها
+    useEffect(() => {
+        if (!data?.data?.blog?.content) return
+
+        const adjustVideoIframes = () => {
+            const videoWrappers = document.querySelectorAll('.ql-video-wrapper')
+
+            videoWrappers.forEach((wrapper) => {
+                const iframe = wrapper.querySelector('iframe')
+                if (iframe) {
+                    // تنظیم کلاس‌های Tailwind برای نسبت 16:9
+                    wrapper.classList.add('relative', 'w-full', 'aspect-video', 'mb-6')
+                    iframe.classList.add('absolute', 'top-0', 'left-0', 'w-full', 'h-full', 'rounded-lg')
+
+                    // حذف استایل‌های inline که ممکن است اندازه را محدود کنند
+                    iframe.removeAttribute('width')
+                    iframe.removeAttribute('height')
+                    iframe.style.width = '100%'
+                    iframe.style.height = '100%'
+                }
+            })
+        }
+
+        // اجرای تابع پس از رندر محتوا
+        const timer = setTimeout(adjustVideoIframes, 100)
+
+        return () => clearTimeout(timer)
+    }, [data?.data?.blog?.content])
+
     if (!data) return null
 
     return (

src/app/globals.css

@@ -166,6 +166,27 @@ tbody tr {
   color: black;
 }
 
+/* استایل‌های iframe ویدیوها */
+#blog-content .ql-video-wrapper {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 16/9;
+  margin: 24px 0;
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+#blog-content .ql-video-wrapper iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100% !important;
+  height: 100% !important;
+  border: none;
+  border-radius: 12px;
+}
+
 /* استایل‌های ریسپانسیو برای موبایل */
 @media screen and (max-width: 768px) {
   #blog-content table {
@@ -218,6 +239,16 @@ tbody tr {
     white-space: normal;
     min-width: 120px;
   }
+
+  /* تنظیمات iframe ویدیو برای موبایل */
+  #blog-content .ql-video-wrapper {
+    margin: 16px 0;
+    border-radius: 8px;
+  }
+
+  #blog-content .ql-video-wrapper iframe {
+    border-radius: 8px;
+  }
 }
 
 .overflowX {