في هذا الدرس 5تصفّح المواضيع
يؤدي إدراج مشغل فيديو بعرض ثابت مثل width="640" داخل شاشة هاتف عرضها 360px إلى اندفاع نصف المشغل خارج حدود النافذة، فتختفي أزرار التحكم ويظهر شريط تمرير أفقي يفسد تجربة التصفح بالكامل.
يتحول المشغل الجامد فوراً إلى عنصر متجاوب مرن عند الجمع بين max-width: 100% و height: auto و display: block ليتقلص بسلاسة داخل أي حاوية ضيقة:
.video-player {
max-width: 100%;
height: auto;
display: block;
border-radius: 10px;
}يحدد الاختيار بين width: 100% و max-width: 100% طريقة تصرف مشغل الفيديو على الشاشات المكتبية الواسعة:
- القاعدة
max-width: 100%; height: auto;: تقلص المشغل على الهواتف وتمنعه من التمدد فوق عرضه الأصلي المسجل، مما يحمي المقاطع القصيرة ذات الدقة المحدودة من التكبير الضبابي. - القاعدة
width: 100%; height: auto;: تمدد مشغل الفيديو عالي الدقة ليملأ كامل عرض عمود المحتوى بنسبة100%صعوداً وهبوطاً بتناسق تام.
تغني خاصية aspect-ratio: 16 / 9; المقترنة مع width: 100%; عن الحيل القديمة وتزيل الأشرطة السوداء المزعجة وقفزات التخطيط تماماً؛ فسواء طبقتها على وسم <video> محلي أو إطار <iframe> مضمن، يحسب المتصفح الارتفاع السينمائي الدقيق لحظياً انطلاقاً من العرض الفعلي للحاوية:
.embed-frame {
width: 100%;
aspect-ratio: 16 / 9;
border: 0;
display: block;
border-radius: 12px;
}عند وضع مقاطع معاينة داخل بطاقات دورات موحدة الارتفاع تختلف نسبتها عن نسبة تسجيل الفيديو الأصلي، تمنحك خاصية object-fit تحكماً بصرياً دقيقاً دون مط الإطارات:
- تملأ القيمة
object-fit: coverكامل صندوق البطاقة من الحافة إلى الحافة مع حفظ تناسب المشهد وقص الزوائد الجانبية بنعومة. - تحافظ القيمة
object-fit: containعلى ظهور كل بكسل من التسجيلات التقنية وشروحات الواجهات دون بتر أي قوائم جانبية.
قارن عملياً بين المشغل الثابت والنسبة القياسية واحتواء البطاقات في المختبر التفاعلي التالي:
.card-video {
width: 100%;
height: 200px;
object-fit: cover;
object-position: center;
display: block;
}يلخص الجدول المرجعي التالي القاعدة القياسية الأنسب لكل حالة من حالات عرض الفيديو المحلي أو المضمن عبر مختلف الشاشات:
| حالة الاستخدام | قاعدة 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>.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Widescreen Aspect Ratio النسبة السينمائية القياسية
- ضبط خاصية aspect-ratio: 16 / 9 ليحافظ الفيديو أو الإطار المضمن تلقائياً على 9 وحدات ارتفاع مقابل كل 16 وحدة عرض.
- للمراجعة
- 02 Replaced Media Element عنصر وسائط مستبدل
- عناصر في HTML مثل video و img و iframe يأتي محتواها المرئي من مورد خارجي ولها أبعاد افتراضية احتياطية.
- للمراجعة
- 03 Object-Fit Video Cover تغطية الفيديو لصندوق البطاقة
- استخدام object-fit: cover على عنصر الفيديو لملء حاوية البطاقة محددة الارتفاع بالكامل دون مط أبعاد المشهد.
- للمراجعة
- 04 Native Resolution Cap سقف الدقة الأصلية
- استخدام max-width: 100% كي يتقلص الفيديو على الشاشات الضيقة دون أن يتمدد أبداً فوق عرضه الأصلي المسجل.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات3
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 RWD RWD
- Responsive Web Design
- بناء مشغلات وسائط وتخطيطات مرنة تتكيف بانسيابية عبر الهواتف والأجهزة اللوحية والحواسيب.
- للمراجعة
- 02 CLS CLS
- Cumulative Layout Shift
- القفز الرأسي المفاجئ لمحتوى الصفحة والذي نمنعه بحجز مساحة مشغل الفيديو مسبقاً عبر خاصية aspect-ratio.
- للمراجعة
- 03 HD HD
- High Definition Video
- صيغ الفيديو الرقمي عالي الدقة المصورة بالنسبة العرضية القياسية 16 إلى 9 مثل 1280x720 و 1920x1080.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
طبّق max-width: 100% و height: auto و display: block على الصنف .video-player ليتسع مشغل عرضه 640px داخل بطاقات الهاتف بأمان.
-
نسّق الصنف .embed-frame بالتصريحات width: 100% و aspect-ratio: 16 / 9 و border: 0 لتتكيف المحاضرات المضمنة تناسبياً على كل الشاشات.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.