diff --git a/src/app/dmag/components/SingleBlogPage.tsx b/src/app/dmag/components/SingleBlogPage.tsx index 50ec3f7..cc29368 100644 --- a/src/app/dmag/components/SingleBlogPage.tsx +++ b/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 = ({ 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 ( diff --git a/src/app/globals.css b/src/app/globals.css index 5a9a4a3..9ac33a1 100644 --- a/src/app/globals.css +++ b/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 {