CSS – ویدیوهای واکنش‌گرا (RWD Videos)

استفاده از خاصیت width

با تنظیم خاصیت width به ۱۰۰٪، پخش‌کننده ویدیو به صورت واکنش‌گرا عمل کرده و اندازه آن با تغییر اندازه صفحه تغییر خواهد کرد:

مثال:

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

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

استفاده از خاصیت max-width

اگر خاصیت max-width روی ۱۰۰٪ تنظیم شود، پخش‌کننده ویدیو در صورت نیاز کوچک می‌شود اما هرگز از اندازه اصلی ویدیو بزرگتر نخواهد شد:

مثال:

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

افزودن ویدیو به صفحه وب

می‌خواهیم یک ویدیو به صفحه وب خود اضافه کنیم که اندازه آن همیشه فضای موجود را پر کند:

مثال:

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

این روش باعث می‌شود ویدیو به‌طور خودکار با عرض صفحه سازگار شود و بدون تغییر نسبت ابعاد، به درستی مقیاس‌بندی شود.

Related posts

Don't miss reading these posts!
JavaScript - کلمه کلیدی Let (Let)

JavaScript – کلمه کلیدی Let (Let)

تعریف let کلیدواژه let در ES6 (2015) معرفی شد و دارای ویژگی‌های خاصی است که آن را از var...

Read more
JavaScript - متغیرها (Variables)

JavaScript – متغیرها (Variables)

متغیرها در جاوا اسکریپت متغیرها در جاوا اسکریپت به عنوان ظرف‌هایی برای ذخیره‌سازی داده‌ها استفاده می‌شوند و می‌توانند به...

Read more
JavaScript - کامنت‌ها (Comments)

JavaScript – کامنت‌ها (Comments)

کامنت‌ها در جاوا اسکریپت کامنت‌ها در جاوا اسکریپت به برنامه‌نویسان این امکان را می‌دهند تا توضیحاتی را به کد...

Read more

Comments

Share your comments with us

برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید.