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

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران (وب مهراز) بپیوندید.

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

مقالات مرتبط