شرح صفوف ومحتوى الفقرة
يلخص الجدول المرجعي التالي القاعدة القياسية الأنسب لكل حالة من حالات عرض الفيديو المحلي أو المضمن عبر مختلف الشاشات:
| حالة الاستخدام | قاعدة CSS القياسية | السلوك عبر الشاشات |
|---|---|---|
| فيديو مقال قياسي | max-width: 100%; height: auto; | يتقلص على الهواتف دون التمدد فوق دقته الأصلية |
| مشغل دروس عالي الدقة | width: 100%; aspect-ratio: 16 / 9; | يملأ عرض العمود بانسيابية ويمنع قفز التخطيط |
إطار محاضرة مضمن iframe | width: 100%; aspect-ratio: 16 / 9; border: 0; | يمنع انكماش الارتفاع الافتراضي إلى 150px |
| معاينة فيديو داخل بطاقة | width: 100%; height: 200px; object-fit: cover; | يغطي صندوق البطاقة بانتظام دون مط الإطارات |
خلاصة المعرفة ومحطة الانتقال
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
عالجت في هذا الدرس مشكلة فيضان الفيديو ثابت العرض عبر max-width: 100% و height: auto، وقارنت بين التمدد الكامل وحماية الدقة الأصلية، وثبتّ النسبة السينمائية aspect-ratio: 16 / 9 لعنصري <video> و <iframe>، ونسقت معاينات البطاقات بخاصية object-fit. في الخطوة التالية ننتقل إلى درس الصور المتجاوبة مع جميع الأجهزة في لغة CSS لإتقان تحجيم الصور وتبديل الخلفيات وتنسيق عنصر <picture>.