با عرض سلام خدمت کاربران سایت پی وی لرن . در این پست آموزشی قصد داریم . به موضوع آموزش responsive کردن ویدئوها در css ، بپردازیم. همانطور که در آموزشهای قبلی نیز به این مهم اشاره کردیم، ویژگی responsive در واقع باعث می شود که عناصر HTML در یک صفحه وب با تغییر اندازه مرورگر ، دچار به هم ریختگی نشود و نظم آن ها حفظ شود.
در آموزشهای فصل Responsive در css، به موضوعات مهم و کاربردی استفاده از تنظیمات viewport در css ، استفاده از grid-view در css ، و responsive کردن عکس ها در css در بخش Responsive کردن قالب وب سایت پرداختیم. در ادامه به آموزش responsive کردن ویدئوها در css ، می پردازیم.
همانظور که در آموزش responsive کردن عکس ها در css نیز اشاره کردیم.
برای responsive کردن ویدئو ها نیز در css ، باید تعیین کنید که با تغییر عرض و ارتفاع پنچره مرورگر ، عرض و ارتفاع عکس نیز به همان نسبت تغییر کند.
اگر ویژگی width به ۱۰۰٪ تنظیم شود،رسانه ی پخش ویدئو ، responsive خواهد بود و مقیاس عرض و ارتفاع به نسبت مرورگر را خواهد داشت:
مثال:
توجه داشته باشید که در مثال بالا، پخش کننده ویدیویی می تواند بزرگتر از اندازه اصلی آن باشد.
راه حل بهتر، در بسیاری از موارد، این است که از ویژگی max-width به جای width ، استفاده کنید.
اگر ویژگی max-width به ۱۰۰ درصد تنظیم شود. در صورتی که لازم باشد اندازه برنامه پخش کننده ویدئو، کوچکتر خواهد شد.
اما هرگز بزرگتر از اندازه اصلی خود نمی شود.
مثال:
این ویدئو تغییر خواهد کرد تا همیشه فضای موجود را بپوشاند :
همانطور که در بخش های قبلی نیز اشاره کردیم ، ویدئوهای وب سایت ها یکی از بخش های اصلی و محتوای ها اصلی وب سایت هاست که از این رو باید نسبت responsive کردن ویدئوها در css نیز اقدام کرد.