طراحی ریسپانسیو وب – ویدیو

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

اگر ویژگی width  100٪ تنظیم شده باشد، پخش کننده ویدیویی ریسپانسیو خواهد بود

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

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

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

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

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

ما می خواهیم یک ویدیو در صفحه وب ما مثال بزنیم. این ویدیو تغییر خواهد کرد تا همیشه فضای موجود را پر کند.

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