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

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


استفاده از ویژگی width[ویرایش | ویرایش]

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

مثال
video {
  width: 100%;
  height: auto;
}

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

استفاده از ویژگی max-width[ویرایش | ویرایش]

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

مثال
video {
  max-width: 100%;
  height: auto;
}

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

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

مثال
video {
  width: 100%;
  height: auto;
}

منابع آموزشی[ویرایش]