انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #4 من درس: فيديو متجاوب مع جميع الأجهزة في لغة CSS

Responsive Card Video Fitting احتواء الفيديو داخل بطاقات العرض

تعلّم بناء مشغلات الفيديو والإطارات المضمنة المتجاوبة في CSS عبر موازنة العرض الأقصى والعرض الكامل، وتثبيت النسبة السينمائية القياسية لمنع تشوه الأبعاد، واحتواء الفيديو داخل البطاقات على جميع الأجهزة.
5 صفوف تعليمية
لغة CSS
3,929 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

عند وضع مقاطع معاينة داخل بطاقات دورات موحدة الارتفاع تختلف نسبتها عن نسبة تسجيل الفيديو الأصلي، تمنحك خاصية object-fit تحكماً بصرياً دقيقاً دون مط الإطارات:

  • تملأ القيمة object-fit: cover كامل صندوق البطاقة من الحافة إلى الحافة مع حفظ تناسب المشهد وقص الزوائد الجانبية بنعومة.
  • تحافظ القيمة object-fit: contain على ظهور كل بكسل من التسجيلات التقنية وشروحات الواجهات دون بتر أي قوائم جانبية.

قارن عملياً بين المشغل الثابت والنسبة القياسية واحتواء البطاقات في المختبر التفاعلي التالي:

الصف 2 معاينة حية
الصف 3 كود برمجي
CSS 
.card-video {
  width: 100%;
  height: 200px;
  object-fit: cover;
  object-position: center;
  display: block;
}
جرّب بنفسك
الصف 4 ملاحظة هامة
الصف 5 ملاحظة هامة

جميع فقرات هذا الدرس (فيديو متجاوب مع جميع الأجهزة في لغة CSS)