سبد (0)

ویدئوها در طراحی واکنش گرای CSS

استفاده از خاصیت width برای ویدئو

در صورتی که خاصیت width را برابر با %100 قرار دهیم، پخش کننده ی ویدئو واکنش گرا(ریسپانسیو) خواهد شد و به راحتی مقیاس دهی می شود.

مثال (ویدئوها در طراحی واکنش گرای CSS)

video {
    width: 100%;
    height: auto;
}
خودتان امتحان کنید »

 توجه کنید که در مثال بالا، پخش کننده ی ویدئو می توانست از اندازه ی اصلی خود بزرگتر شود. بعنوان یک راه حل بهتر، در بیشتر موارد می توان از خاصیت max-width برای حل این مشکل، کمک گرفت. 


استفاده از خاصیت max-width برای ویدئو

در صورتی که خاصیت max-width را برابر با %100 قرار دهیم، پخش کننده ی ویدئو، در صورت لزوم می تواند کوچک شود، اما هرگز بزرگتر از اندازه ی اصلی خود نخواهد شد:

مثال (ویدئوها در طراحی واکنش گرای CSS)

video {
    max-width: 100%;
    height: auto;
}
خودتان امتحان کنید »

 


اضافه کردن یک ویدئو به مثال واکنش گرا

 اکنون می خواهیم به مثال واکنش گرای خود، که قبلا آن را ایجاد کردیم، یک ویدئو اضافه کنیم. این ویدئو همواره تمام فضای موجود را اشغال می کند:

مثال (ویدئوها در طراحی واکنش گرای CSS)

video {
    width: 100%;
    height: auto;
}
خودتان امتحان کنید »

آموزش صوتی CSS

ابزاری که در پیش روی دارید یکی از ابزارهای بسیار کاربردی سایت بیاموز در زمینه آموزش است، این ابزار برای سهولت یادگیری شما کاربران محترم طراحی شده است.

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه