CSS

CSS Video Responsive
فيديو متجاوب مع جميع الأجهزة في لغة CSS

سوف تعلم في هذا الدرس  طريقة ضبط الفيديوهات video responsive ويعمل علي عدة مقاسات مختلفة للشاشات وهو ما يحسن تجربة المستخدم اثناء تصفح صفحات الويب.

التاريخ

06 نوفمبر 2021

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

1510

المواضيع

24
الشروحات chevron_left CSS Video Responsive chevron_left CSS
CSS Flex Box keyboard_arrow_down

CSS Video Responsive
فيديو متجاوب مع جميع الأجهزة في لغة CSS

</> CSS Video Responsive
فيديو متجاوب مع جميع الأجهزة في لغة CSS

لكي يصبح الفيديو متجاوب مع أغلب أنواع الأجهزة فيجيب القيام بتعيين قيمة خاصية width:100% وفي هذه الحالة سوف يكون مشغل الفيديو متجاوب Responsive ويتمدد وينكمش الفيديو مع حجم الشاشة.

CSS Video Responsive

فيديو متجاوب مع جميع الأجهزة في لغة CSS.

CSS Video Responsive

فيديو متجاوب مع جميع الأجهزة في لغة CSS.

video
{
  width: 100%;
  height: auto;
}
Resize
قم بتكبير وتصغير نافذة المتصفح لكي تشاهد تمدد وإنكماش الفيديو مع حجم viewport المتلائم مع حجم النافذة.

</> CSS Video Responsive max width
خاصية max-width مع الفيديوهات المتجاوبة في لغة CSS

إذا تم تعيين خاصية max-width إلى 100٪ ، فسيتم تصغير حجم الفيديو إذا لزم الأمر فقطوهو عندما يكون الفيديو أصغر من الحجم المحدد داخل width، ولكن لا يتم زيادة حجمه مطلقًا ليكون أكبر من حجمه الموجود في خاصية width.

CSS Video Responsive max width
CSS Video Responsive max width
video
{
  max-width: 100%;
  height: auto;
}
مصطلحات الدرس
Video
Video

فيديو

Responsive
Responsive

متجاوب

Width
Width

عرض

Example
Example

مثال

Add
Add

إضافة

اختصارات الدرس
CSS
CSS

Cascading Style Sheets

صفحات الأنماط الانسيابية
Max
Max

Maximum

حد أقصي
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.