ویدئو ریسپانسیو CSS

ویدئو ریسپانسیو CSS با اندازه ها و جهت های مختلف صفحه تنظیم می شوند. ویژگی های عرض و حداکثر عرض پاسخ به محتوای ویدئو را اضافه می کنند.

افزودن ویدئو ریسپانسیو CSS

هنگامی که اندازه پنجره را تغییر می دهید یا جهت گیری آن را تغییر می دهید ، یک فیلم ریسپانسیو CSS کیفیت و نسبت ابعاد را حفظ می کند. می توانید عرض CSS را برای پاسخگویی به مقیاس فیلم ها تنظیم کنید.

تنظیم عرض برای مقیاس فیلم ها

مثال زیر پخش کننده ویدیو را مقیاس بندی می کند. بعد از اینکه ویژگی width را روی 100٪ تنظیم کردید ، به یک ویدئو ریسپانسیو CSS تبدیل می شود.

video {
    width: 100%;
    height: auto;
}

توجه: مثال بالا اجازه می دهد مقیاس بندی شود تا زمانی که ویدیو از اندازه اصلی بزرگتر شود. ممکن است هنگام نمایش در صفحه بزرگتر ، مشکلات کیفیتی ایجاد کند.

برای جلوگیری از بیش از اندازه اصلی ویدئو پاسخگو ، ویژگی حداکثر عرض را روی 100٪ تنظیم کنید (تا ویدیو بتواند آزادانه کوچک شود اما بالا نرود).

video {
    max-width: 100%;
    height: auto;
}

جاسازی ویدئو ریسپانسیو

ممکن است بخواهید ویدیوی youtube را ریسپانسیو کنید. جاسازی فیلم های Youtube با عنصر <iframe> اتفاق می افتد ، اما ممکن است فیلم های جاسازی شده پاسخگو نباشند.

برای افزودن یک  responsive Youtube embed ، باید ویژگی های CSS را به کد HTML اضافه کنید مانند مثال کد زیر:

.video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 0px;
  height: 0;
  overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

نکته مهم ویدئو ریسپانسیو CSS:

• Bootstrap همچنین با استفاده از کلاس .embed-responsive گزینه ای برای افزودن ویدئوی ریسپانسیو را در اختیار شما قرار می دهد.

در دوره آموزش CSS بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.