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