ویدیوهای واکنش گرا (RWD Videos)
«ویدیوهای واکنش گرا (Responsive Videos)» یعنی پلیر ویدیو با عرض صفحه هماهنگ شود. بنابراین روی موبایل کوچک می شود و روی دسکتاپ جا می گیرد. نسبت تصویر یعنی رابطه عرض و ارتفاع.
روش width: 100% و height: auto
با این روش، پلیر همیشه به اندازه ظرف کش می شود. ارتفاع هم خودکار تنظیم می شود.
<style>
video {
width: 100%;
height: auto;
}
</style>
روش بهتر: max-width برای جلوگیری از بزرگ نمایی
max-width ویدیو را کوچک می کند، اما از اندازه اصلی بزرگ تر نمی کند.
<style>
video {
max-width: 100%;
height: auto;
}
</style>
افزودن ویدیو به نمونه صفحه
این نسخه ساده، همیشه تمام عرض موجود را پر می کند.
<style>
video {
width: 100%;
height: auto;
}
</style>
گام های عملی
- برای ویدیو از max-width: 100% استفاده کن.
- ارتفاع را همیشه auto بگذار.
- در کانتینر، padding مناسب در نظر بگیر.
نکته: اگر ویدیو نسبت عجیبی دارد، آن را در ظرفی با نسبت ثابت قرار بده.
جمع بندی سریع
- ویدیوهای واکنش گرا با صفحه هماهنگ می شوند.
- max-width از بزرگ نمایی بی کیفیت جلوگیری می کند.
- height:auto نسبت تصویر را حفظ می کند.
ادامه مسیر: تصاویر واکنش گرا، پرس وجوهای رسانه ای، و نما (Viewport). این مفاهیم همراه «ویدیوهای واکنش گرا» نتیجه عالی می دهند.