آموزش ویدیوها در واکنش گرایی در CSS

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

اگر ویژگی width را برابر با %100 قرار دهیم، پخش کننده ی ویدیو واکنش گرا می شود و کوچک یا بزرگ می شود:

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

توجه کنید که در مثال بالا، پخش کننده ی ویدیو می تواند مقیاس دهی شود تا از سایز اصلی خود، بزرگتر شود. یک راه حل بهتر در بیشتر موارد، استفاده از ویژگی max-width به جای آن(یعنی width:100%) است. 

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

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

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

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

ما می خواهیم یک ویدیو را به مثال صفحه ی وب مولانا اضافه کنیم. این ویدیو همیشه تمام فضای در دسترس خود را مورد استفاده قرار می دهد:

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

منبع: https://www.w3schools.com/css