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