CSS – ویدیوهای واکنشگرا (RWD Videos)
Last Update:
استفاده از خاصیت width
با تنظیم خاصیت width
به ۱۰۰٪، پخشکننده ویدیو به صورت واکنشگرا عمل کرده و اندازه آن با تغییر اندازه صفحه تغییر خواهد کرد:
مثال:
video {
width: 100%;
height: auto;
}
در این مثال، پخشکننده ویدیو میتواند بزرگتر از اندازه اصلی ویدیو شود. در بسیاری از موارد، استفاده از خاصیت max-width
راهحل بهتری است تا ویدیو از اندازه اصلی خود بزرگتر نشود.
استفاده از خاصیت max-width
اگر خاصیت max-width
روی ۱۰۰٪ تنظیم شود، پخشکننده ویدیو در صورت نیاز کوچک میشود اما هرگز از اندازه اصلی ویدیو بزرگتر نخواهد شد:
مثال:
video {
max-width: 100%;
height: auto;
}
افزودن ویدیو به صفحه وب
میخواهیم یک ویدیو به صفحه وب خود اضافه کنیم که اندازه آن همیشه فضای موجود را پر کند:
مثال:
video {
width: 100%;
height: auto;
}
این روش باعث میشود ویدیو بهطور خودکار با عرض صفحه سازگار شود و بدون تغییر نسبت ابعاد، به درستی مقیاسبندی شود.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام