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

Video Proportions Aspect Ratio حفظ تناسب الفيديو بخاصية النسبة

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

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

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

تغني خاصية aspect-ratio: 16 / 9; المقترنة مع width: 100%; عن الحيل القديمة وتزيل الأشرطة السوداء المزعجة وقفزات التخطيط تماماً؛ فسواء طبقتها على وسم <video> محلي أو إطار <iframe> مضمن، يحسب المتصفح الارتفاع السينمائي الدقيق لحظياً انطلاقاً من العرض الفعلي للحاوية:

الصف 2 كود برمجي
CSS 
.embed-frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  display: block;
  border-radius: 12px;
}
جرّب بنفسك
الصف 3 ملاحظة هامة

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