ریسپانسیو ویب پیج ڈیزائن - ویدیو

width خاصیت استعمال کریں

اگر width 100% کا اعداد و شمار سے خاصیت کا تعین کیا جائے تو ویڈیو پلیر جواب دے گا اور بڑھا یا چھوٹا کیا جائے گا:

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

توجہ دے کہ، بالا مثال میں ویڈیو پلیر اصل سائز سے بڑا کیا جاسکتا ہے۔ کئی معاملات میں، بہتر حل max-width خاصیت استعمال کرنا ہوتا ہے۔

اگر max-width 100% کا اعداد و شمار سے خاصیت کا تعین کیا جائے تو ویڈیو پلیر تناسب سے چھوٹا کیا جائے گا، لیکن بجائے اصل سائز سے بڑا نہیں کیا جائے گا:

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

ہم نے مثال ویب پیج میں ویدیو شامل کرنا چاہتے ہیں۔ ویدیو کو بڑھا یا چھوٹا کیا جائے گا تاکہ یہ تمام دستیاب مکان کا استعمال کریں:

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