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 - تاریخ‌ها (Dates)

JavaScript – تاریخ‌ها (Dates)

آبجکت‌های تاریخ (Date) در جاوااسکریپت آبجکت‌های تاریخ در جاوااسکریپت به ما امکان کار با تاریخ و زمان را می‌دهند....

بیشتر بخوانید
JavaScript - آرایه‌های ثابت (Array Const)

JavaScript – آرایه‌های ثابت (Array Const)

جاوااسکریپت: تعریف آرایه با const در سال 2015، جاوااسکریپت کلمه کلیدی مهمی به نام const را معرفی کرد. این...

بیشتر بخوانید
JavaScript - تکرار آرایه‌ها (Array Iteration)

JavaScript – تکرار آرایه‌ها (Array Iteration)

جاوا اسکریپت: تکرار بر روی آرایه‌ها جاوا اسکریپت روش‌های مختلفی برای تکرار (Iteration) بر روی آرایه‌ها ارائه می‌دهد که...

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

نظرات

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

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