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;
}

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

پست های مرتبط

مطالعه این پست ها رو از دست ندین!
JavaScript - رویدادها (Events)

JavaScript – رویدادها (Events)

رویدادهای HTML رویدادها در HTML، “اتفاقاتی” هستند که برای عناصر HTML رخ می‌دهند. این اتفاقات می‌توانند ناشی از کار...

بیشتر بخوانید
JavaScript - سازنده‌های شیء (Object Constructors)

JavaScript – سازنده‌های شیء (Object Constructors)

ساخت آبجکت با تابع سازنده (Object Constructor Function) برای ساخت چندین آبجکت مشابه، از تابع سازنده استفاده می‌شود. این...

بیشتر بخوانید
JavaScript - نمایش شیء (Object Display)

JavaScript – نمایش شیء (Object Display)

نحوه نمایش آبجکت‌ها در جاوااسکریپت هنگام نمایش یک آبجکت جاوااسکریپت به صورت مستقیم، خروجی معمولاً به شکل [object Object]...

بیشتر بخوانید

نظرات

سوالات و نظراتتون رو با ما به اشتراک بذارید

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