021-28423015
021-28423015

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

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

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

ویژگی width
video {
    width: 100%;
    height: auto;
}
مشاهده مثال

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

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

ویژگی max-width
video {
    max-width: 100%;
    height: auto;
}
مشاهده مثال

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

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

اضافه کردن ویدیو به مثال وب
video {
    width: 100%;
    height: auto;
}
مشاهده مثال

 


نظر شما

لطفا نام و نام خانوادگی خود را وارد کنید
لطفا ایمیل خود را وارد کنید لطفا ایمیل صحیح وارد کنید.
لطفا متن نظر خود را وارد کنید
>

یادگیری CSS

مقالات و دروس

عضویت در خبرنامه شرکت نرم افزاری وب مهراز

برای اطلاع از بسته ها ، تخفیف های استثنایی و تازه های ما به خبرنامه وب مهراز بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط