استخدام خاصية العرض (width)
إذا تم ضبط خاصية العرض (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;
}
