طراحی وب واکنش‌گرا - ویدئوها

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو


استفاده از ویژگی width

اگر ویژگی width برابر با ۱۰۰٪ تنظیم شده باشد، پخش کننده ویدئو واکنش گرا خواهد بود و کوچک و بزرگ خواهد شد:[۱]

مثال

video {
  width: 100%;
  height: auto;
}


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

استفاده از ویژگی max-width

اگر ویژگی max-width برابر با ۱۰۰٪ تنظیم شده باشد، در صورت لزوم، اجرا کننده ویدیو کوچک‌تر از اندازه اصلی خواهد شد، اما هرگز بزرگتر از اندازه اصلی خود نمی‌شود:

مثال

video {
  max-width: 100%;
  height: auto;
}


اضافه‌کردن ویدئو به صفحه وب مثال

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

مثال

video {
  width: 100%;
  height: auto;
}


منابع آموزشی