توسيط فيديوهات YouTube وعرضها بملء الشاشة وتكرارها على الويب: التحديات الشائعة وحلولها

يُعد تضمين فيديوهات YouTube في موقعك مهمة شائعة، لكن الوصول إلى تجربة عصرية ومصقولة، مثل توسيط الفيديو وجعله يملأ الشاشة بنسبة عرض إلى ارتفاع صحيحة مع القص المناسب وضمان تكراره بسلاسة، قد يكون أصعب مما يبدو. إليك دليلًا عمليًا لتجاوز هذه المشكلات الثلاث الشائعة.

توسيط فيديو YouTube باستخدام HTML وCSS

أفضل طريقة لتوسيط فيديو YouTube (أو أي iframe) أفقيًا وعموديًا هي استخدام تقنيات CSS الحديثة. ومن أكثر الأساليب فعالية:

• Flexbox: يضمن تغليف <iframe> داخل حاوية <div> وتطبيق display: flex; justify-content: center; align-items: center; توسيط الفيديو في الاتجاهين. وهذا الأسلوب متين ومتجاوب9612.
• محاذاة النص (Text-align): للتوسيط الأفقي فقط، يمكنك استخدام text-align: center; على الحاوية الأم.
• الهامش التلقائي (Margin auto): يمكن أيضًا توسيط الـ iframe أفقيًا بضبط margin: 0 auto; عليه (مع عرض ثابت).

مثال:

xml
<div style="display: flex; justify-content: center; align-items: center; height: 100vh;">
  <iframe src="https://www.youtube.com/embed/VIDEO_ID" style="aspect-ratio: 16/9; width: 80vw; max-width: 1200px; border: 0;" allowfullscreen></iframe>
</div>

فيديو YouTube بملء الشاشة مع الحفاظ على نسبة العرض إلى الارتفاع والقص

يُعد جعل فيديو YouTube يملأ الشاشة بالكامل مع الحفاظ على نسبة العرض إلى الارتفاع، وقص الجوانب عند الحاجة، طلبًا تصميميًا شائعًا. والمفتاح هو:

• اجعل الحاوية تغطي منطقة العرض: \ استخدم position: fixed; inset: 0; width: 100vw; height: 100vh; overflow: hidden; للعنصر div الأم.
• حافظ على نسبة العرض إلى الارتفاع: \ استخدم خاصية CSS aspect-ratio على الـ iframe (مثل aspect-ratio: 16/9;). اضبط الارتفاع على 100vh والعرض على calc(100vh * 16 / 9). وإذا كانت منطقة العرض ضيقة جدًا، فاضبط min-width: 100vw لضمان أن يغطي الفيديو الشاشة دائمًا مع القص عند الحاجة237.
• وسّط الفيديو: \ استخدم position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); على الـ iframe لإبقائه في المنتصف أثناء تغيّر حجمه.

مثال:

<div style="position: fixed; inset: 0; width: 100vw; height: 100vh; overflow: hidden; background: black;">
  <iframe
    src="https://www.youtube.com/embed/VIDEO_ID"
    style="height: 100vh; width: calc(100vh * 16 / 9); min-width: 100vw; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 0;"
    allowfullscreen
  ></iframe>
</div>

يضمن هذا الأسلوب أن يملأ الفيديو الارتفاع دائمًا، ويبقى في المنتصف، ويقص الجوانب إذا كانت الشاشة ضيقة جدًا<code>[23](https://www.reddit.com/r/css/comments/13klsaa/horizontally_andor_vertically_centered_iframe/)</code>.

معامل التكرار (loop) في YouTube لا يعمل

يتفاجأ كثير من المطورين بأن مجرد إضافة loop=1 إلى رابط تضمين YouTube لا يجعل الفيديو يتكرر، إذ تتطلب واجهة التضمين في YouTube معاملًا إضافيًا:

• يجب أيضًا إضافة playlist=VIDEO_ID إلى الرابط. ومن دونه سيُعرض الفيديو مرة واحدة ثم يتوقف، حتى مع وجود loop=1.

المثال الصحيح:

<iframe
  src="https://www.youtube.com/embed/VIDEO_ID?loop=1&playlist=VIDEO_ID"
  allowfullscreen
></iframe>

استبدل VIDEO_ID بمعرّف فيديو YouTube الفعلي لديك، وبذلك يتكرر الفيديو كما هو متوقع.

استخدام JavaScript (اختياري) إذا لم تنجح الطرق السابقة

لإنشاء تضمين احترافي وسلس لفيديو YouTube يكون في المنتصف، ويملأ الشاشة بنسبة العرض إلى الارتفاع الصحيحة (مع القص عند الحاجة)، ويتكرر باستمرار:

عدّل قيمة التكبير (scale) بما يناسب احتياجاتك:

<div id="video-container" class="absolute top-0 w-full flex justify-center left-0 h-screen" style="aspect-ratio: 16 / 9;">
        <iframe class="h-full w-full absolute top-0" style="transform:scale(1.2);aspect-ratio: 16 / 9;" src="https://www.youtube.com/embed/VIDEO_ID?rel=0&autoplay=1&mute=1&loop=1&playlist=VIDEO_ID" title="Gargash Corporate Video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
<style>
       #video-container:after {
           content: '';
           display: block;
           height: 100%;
           width: 100%;
           position: absolute;
           top: 0;
           left: 0;
           background: rgba(0, 0, 0, 0.5);
       }
       </style>
       <script>
       function resizeYoutubeIframe() {
           const container = document.getElementById('video-container');
           const iframe = container.querySelector('iframe');
           const containerHeight = window.innerHeight;
           const containerWidth = window.innerWidth;

           // Calculate width to maintain 16:9 aspect ratio based on height
           let videoWidth = containerHeight * (16 / 9);
           let videoHeight = containerHeight;

           // If calculated width is less than viewport width, fill width instead and crop top/bottom
           if (videoWidth < containerWidth) {
               videoWidth = containerWidth;
               videoHeight = containerWidth * (9 / 16);
           }

           // Set iframe size
           iframe.style.width = (videoWidth + 100) + 'px';
           iframe.style.height = (videoHeight + 100) + 'px';

           // Center the iframe
           iframe.style.left = (((containerWidth - videoWidth) / 2) - 50) + 'px';
           iframe.style.top = (((containerHeight - videoHeight) / 2) - 50) + 'px';
       }

       window.addEventListener('resize', resizeYoutubeIframe);
       window.addEventListener('DOMContentLoaded', resizeYoutubeIframe);
</script>