CSS - RWD Responsive Videos الفيديوهات المتجاوبة

CSS - الفيديوهات المتجاوبة (Responsive Videos)

🔸 الفيديوهات المتجاوبة تتغير أبعادها تلقائيًا لتناسب حجم الشاشة أو العنصر الحاوي لها، تمامًا مثل الصور المتجاوبة. هذا ضروري لتحسين تجربة المشاهدة على الهواتف والشاشات الصغيرة.

📺 المشكلة: الفيديو له عرض وارتفاع ثابت

<iframe width="560" height="315" src="https://www.youtube.com/embed/xyz"></iframe>

📌 هذا الكود يجعل الفيديو غير متجاوب لأنه ثابت الأبعاد، وقد يخرج عن إطار الصفحة على الشاشات الصغيرة.

✅ الحل: جعله متجاوبًا باستخدام CSS

.video-container {
  position: relative;
  padding-bottom: 56.25%; /* نسبة 16:9 */
  height: 0;
  overflow: hidden;
  max-width: 100%;
}

.video-container iframe,
.video-container object,
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div class="video-container">
  <iframe src="https://www.youtube.com/embed/xyz" frameborder="0"></iframe>
</div>

📌 هذا يجعل الفيديو يتمدد أو يتقلص بنسبة ثابتة (16:9) ويتناسب مع عرض الجهاز.

🎯 لماذا نستخدم padding-bottom؟

لأن padding-bottom بنسبة مئوية يُحسب من عرض العنصر. فنسبة 56.25% تعني أن الارتفاع سيكون دائمًا 9 ÷ 16 = 0.5625 × العرض، وهي نسبة شاشة 16:9.

💡 ملاحظات هامة

• الطريقة دي تنفع مع <iframe> و<embed> و<object>.
• ينصح بوضع max-width: 100% للحاوية لضمان أنها لا تتجاوز عرض الشاشة.
• استخدم هذه الطريقة داخل أي تصميم متجاوب لعرض الفيديوهات بشكل صحيح على جميع الأجهزة.