ویدئوها در طراحی واکنش گرای CSS
استفاده از خاصیت width برای ویدئو
در صورتی که خاصیت width را برابر با %100 قرار دهیم، پخش کننده ی ویدئو واکنش گرا(ریسپانسیو) خواهد شد و به راحتی مقیاس دهی می شود.
توجه کنید که در مثال بالا، پخش کننده ی ویدئو می توانست از اندازه ی اصلی خود بزرگتر شود. بعنوان یک راه حل بهتر، در بیشتر موارد می توان از خاصیت max-width برای حل این مشکل، کمک گرفت.
استفاده از خاصیت max-width برای ویدئو
در صورتی که خاصیت max-width را برابر با %100 قرار دهیم، پخش کننده ی ویدئو، در صورت لزوم می تواند کوچک شود، اما هرگز بزرگتر از اندازه ی اصلی خود نخواهد شد:
مثال (ویدئوها در طراحی واکنش گرای CSS)
video {
max-width: 100%;
height: auto;
}
خودتان امتحان کنید »max-width: 100%;
height: auto;
}
اضافه کردن یک ویدئو به مثال واکنش گرا
اکنون می خواهیم به مثال واکنش گرای خود، که قبلا آن را ایجاد کردیم، یک ویدئو اضافه کنیم. این ویدئو همواره تمام فضای موجود را اشغال می کند:
- نوشته شده توسط احسان عباسی
- بازدید: 7641