CSS

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

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

التاريخ

06 نوفمبر 2021

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

1053

المواضيع

24
chevron_right التالى
82%
السابق chevron_left
الشروحات chevron_left CSS Video Responsive chevron_left CSS
CSS Syntax keyboard_arrow_down
check check_circle_outline 1 - CSS Introduction
check check_circle_outline 2 - CSS Syntax
check check_circle_outline 3 - CSS Selectors
check check_circle_outline 4 - CSS How To
check check_circle_outline 5 - CSS Comments
check check_circle_outline 6 - CSS Important
CSS Text keyboard_arrow_down
check check_circle_outline 7 - Text Color
check check_circle_outline 8 - Text Alignment
check check_circle_outline 9 - Vertical Alignment
check check_circle_outline 10 - Text Transformation
check check_circle_outline 11 - Text Spacing
check check_circle_outline 12 - White Space
check check_circle_outline 13 - Text Shadow
check check_circle_outline 14 - Text Direction
CSS Text Decoration keyboard_arrow_down
check check_circle_outline 15 - Decoration Line
check check_circle_outline 16 - Decoration Color
check check_circle_outline 17 - Decoration thickness
check check_circle_outline 18 - Decoration Style
check check_circle_outline 19 - Decoration Shorthand
CSS Fonts keyboard_arrow_down
check check_circle_outline 20 - Font Size
check check_circle_outline 21 - Font Family
check check_circle_outline 22 - Font Style
check check_circle_outline 23 - Font Shorthand
check check_circle_outline 24 - Google Font
CSS Backgrounds keyboard_arrow_down
check check_circle_outline 25 - Background Color
check check_circle_outline 26 - Background Image
check check_circle_outline 27 - Background Size
check check_circle_outline 28 - Background Repeat
check check_circle_outline 29 - Background Attachment
check check_circle_outline 30 - Background Position
check check_circle_outline 31 - Background Shorthand
CSS Borders keyboard_arrow_down
check check_circle_outline 32 - CSS Borders
check check_circle_outline 33 - Border style
check check_circle_outline 34 - Border Width
check check_circle_outline 35 - Border Color
check check_circle_outline 36 - Border Sides
check check_circle_outline 37 - Border Shorthand
check check_circle_outline 38 - Rounded Borders
CSS Outline keyboard_arrow_down
check check_circle_outline 39 - CSS Outline
check check_circle_outline 40 - Outline style
check check_circle_outline 41 - Outline Width
check check_circle_outline 42 - Outline Color
check check_circle_outline 43 - Outline Offset
check check_circle_outline 44 - Outline Shorthand
CSS Box Model keyboard_arrow_down
check check_circle_outline 45 - CSS Margin
check check_circle_outline 46 - CSS Padding
check check_circle_outline 47 - Box Sizing
check check_circle_outline 48 - Box Model
CSS Dimensions keyboard_arrow_down
check check_circle_outline 49 - CSS Height
check check_circle_outline 50 - CSS Width
check check_circle_outline 51 - Max Height
check check_circle_outline 52 - Min Height
check check_circle_outline 53 - Max Width
check check_circle_outline 54 - Min Width
check check_circle_outline 55 - Calculator
CSS Position keyboard_arrow_down
check check_circle_outline 56 - CSS Display
check check_circle_outline 57 - CSS Visibility
check check_circle_outline 58 - CSS Float
check check_circle_outline 59 - CSS Clear
check check_circle_outline 60 - CSS Position
check check_circle_outline 61 - Layers Orders
check check_circle_outline 62 - CSS Overflow
CSS Style keyboard_arrow_down
check check_circle_outline 63 - CSS Links
check check_circle_outline 64 - CSS Images
check check_circle_outline 65 - CSS Lists
check check_circle_outline 66 - CSS Tables
check check_circle_outline 67 - CSS Transparency
CSS Navigation keyboard_arrow_down
check check_circle_outline 68 - CSS Navigation Bar
check check_circle_outline 69 - Vertical Navigation
check check_circle_outline 70 - Horizontal Navigation
CSS Flex Box keyboard_arrow_down
check check_circle_outline 71 - CSS Flexbox
check check_circle_outline 72 - Flex Direction
check check_circle_outline 73 - Flex Wrap
check check_circle_outline 74 - Flex Flow
check check_circle_outline 75 - Justify Content
check check_circle_outline 76 - Align Items
check check_circle_outline 77 - Align Content
check check_circle_outline 78 - Flex Order
check check_circle_outline 79 - Flex Basis
check check_circle_outline 80 - Flex Grow
check check_circle_outline 81 - Flex Shrink
check check_circle_outline 82 - Align Self
check check_circle_outline 83 - CSS Flex
CSS Grid System keyboard_arrow_down
check check_circle_outline 84 - Grid System
check check_circle_outline 85 - Grid Container
check check_circle_outline 86 - Grid Items
CSS Grid Columns keyboard_arrow_down
check check_circle_outline 87 - Template Columns
check check_circle_outline 88 - Column Start
check check_circle_outline 89 - Column End
check check_circle_outline 90 - Grid Column
check check_circle_outline 91 - Auto Columns
CSS Grid rows keyboard_arrow_down
check check_circle_outline 92 - Template Rows
check check_circle_outline 93 - Row Start
check check_circle_outline 94 - Row End
check check_circle_outline 95 - Grid Row
check check_circle_outline 96 - Auto Rows
check check_circle_outline 97 - Grid Template
CSS Grid Area keyboard_arrow_down
check check_circle_outline 98 - Template Areas
check check_circle_outline 99 - Grid Area
CSS Grid Gaps keyboard_arrow_down
check check_circle_outline 100 - Row Gap
check check_circle_outline 101 - Grid Gap
check check_circle_outline 102 - Column Gap
CSS Grid keyboard_arrow_down
check check_circle_outline 103 - Grid Content
check check_circle_outline 104 - Grid Flow
check check_circle_outline 105 - Repeat Function
CSS Responsive keyboard_arrow_down
check check_circle_outline 106 - RWD Introduction
check check_circle_outline 107 - RWD Viewport
check check_circle_outline 108 - Media Queries
check check_circle_outline 109 - Media Examples
check check_circle_outline 110 - RWD Grid View
check check_circle_outline 111 - RWD Grid Media
check check_circle 112 - RWD Video
check check_circle_outline 113 - RWD Image
check check_circle_outline 114 - Flex Responsive
CSS Text Effects keyboard_arrow_down
check check_circle_outline 115 - Text Overflow
check check_circle_outline 116 - Word Wrap
check check_circle_outline 117 - Writing Mode
CSS Advanced keyboard_arrow_down
check check_circle_outline 118 - Background Origin
check check_circle_outline 119 - CSS Pagination
check check_circle_outline 120 - CSS Buttons
check check_circle_outline 121 - Column Count
check check_circle_outline 122 - 2D Transforms
check check_circle_outline 123 - 3D Transforms
check check_circle_outline 124 - CSS Transitions
check check_circle_outline 125 - Background Clip
check check_circle_outline 126 - Rounded Corners
check check_circle_outline 127 - CSS Colors
check check_circle_outline 128 - Multiple Backgrounds
check check_circle_outline 129 - Color Keywords
check check_circle_outline 130 - Color Gradients
check check_circle_outline 131 - Border Images
check check_circle_outline 132 - CSS Animations
check check_circle_outline 133 - CSS Tooltip
check check_circle_outline 134 - CSS Variables
check check_circle_outline 135 - CSS Dynamic
CSS Selectors keyboard_arrow_down
check check_circle_outline 136 - Combinator selectors
check check_circle_outline 137 - Pseudo Classes

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

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

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

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

جربها بنفسك chevron_right
CSS Video Responsive

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

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

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

إذا تم تعيين خاصية max-width إلى 100٪ ، فسيتم تصغير حجم الفيديو إذا لزم الأمر فقطوهو عندما يكون الفيديو أصغر من الحجم المحدد داخل width، ولكن لا يتم زيادة حجمه مطلقًا ليكون أكبر من حجمه الموجود في خاصية width.
CSS Video Responsive max width
جربها بنفسك chevron_right
CSS Video Responsive max width 
video
{
  max-width: 100%;
  height: auto;
}
جربها بنفسك chevron_right
مصطلحات الدرس
Video
Video

فيديو

Responsive
Responsive

متجاوب

Width
Width

عرض

Example
Example

مثال

Add
Add

إضافة

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

Cascading Style Sheets

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

Maximum

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

CLOSETAG CLOSETAG

منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.

الشروحات

Computer

Internet

CS

HTML

CSS

JavaScript

JQuery

الدورات

HTML5

CSS

Java Script

قانوني

الأحكام والشروط

اتفاقية الترخيص

سياسة الخصوصية

معلومات حقوق النشر

سياسة ملفات الارتباط

الدعم

أسئلة وأجوبة

اتصل بنا

حقوق النشر © 2023 CLOSETAG كل الحقوق محفوظة
CLOSETAG