دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)



  • ۱۷
  • آبان

جلسه ۶۸ : رسانه های پخش ویدئویی در CSS

  • دسته‌بندی‌ها :
جلسه ۶۸ : رسانه های پخش ویدئویی در CSS
    • جزئیات
    • نوع مطلبآموزشی

      مقدمه

      با عرض سلام خدمت کاربران سایت پی وی لرن . در این پست آموزشی قصد داریم . به موضوع آموزش responsive کردن ویدئوها در css ، بپردازیم. همانطور که در آموزشهای قبلی نیز به این مهم اشاره کردیم، ویژگی responsive در واقع باعث می شود که عناصر HTML در یک صفحه وب با تغییر اندازه مرورگر ، دچار به هم ریختگی نشود و نظم آن ها حفظ شود.

      در  آموزشهای فصل Responsive در css، به موضوعات مهم و کاربردی استفاده از تنظیمات viewport در css ، استفاده از grid-view در css ، و  responsive کردن عکس ها در css در بخش Responsive کردن قالب وب سایت پرداختیم. در ادامه به آموزش responsive کردن ویدئوها در css ، می پردازیم.

       

      responsive-videos

      responsive-videos

       

      آموزش responsive کردن ویدئوها در css

      همانظور که در آموزش  responsive کردن عکس ها در css نیز اشاره کردیم.

      برای responsive کردن ویدئو ها نیز در css ، باید تعیین کنید که با تغییر عرض و ارتفاع پنچره مرورگر ، عرض و ارتفاع عکس نیز به همان نسبت تغییر کند.

      استفاده از خصوصیت width ویدئو در responsive

      اگر ویژگی width به ۱۰۰٪ تنظیم شود،رسانه ی پخش ویدئو ، responsive خواهد بود و مقیاس عرض و ارتفاع به نسبت مرورگر را خواهد داشت:

      مثال:

      مثال : رسپانسیو ویدئو
      خودتان امتحان کنید »

      توجه داشته باشید که در مثال بالا، پخش کننده ویدیویی می تواند بزرگتر از اندازه اصلی آن باشد.

      راه حل بهتر، در بسیاری از موارد، این است که از ویژگی max-width به جای width ، استفاده کنید.

      استفاده از خصوصیت max-width ویدئو در responsive

      اگر ویژگی max-width به ۱۰۰ درصد تنظیم شود. در صورتی که لازم باشد اندازه برنامه پخش کننده ویدئو، کوچکتر خواهد شد.

      اما هرگز بزرگتر از اندازه اصلی خود نمی شود.

      مثال:

      مثال : استفاده از ویژگی max-width
      خودتان امتحان کنید »

      افزودن ویدئو به صفحات html

      این ویدئو تغییر خواهد کرد تا همیشه فضای موجود را بپوشاند :

      مثال : افزودن ویدئو به مثال قبلی
      خودتان امتحان کنید »

      کلام آخر

      همانطور که در بخش های قبلی نیز اشاره کردیم ، ویدئوهای وب سایت ها یکی از بخش های اصلی و محتوای ها اصلی وب سایت هاست که از این رو باید نسبت  responsive کردن ویدئوها در css نیز اقدام کرد.

      QR:  جلسه ۶۸ : رسانه های پخش ویدئویی در CSS
      به اشتراک بگذارید