جاسازی می کند

با ایجاد یک نسبت ذاتی که در هر دستگاهی مقیاس می‌شود، ویدئوهای واکنش‌گرا یا جاسازی‌های نمایش اسلاید را بر اساس عرض والد ایجاد کنید.

در باره

قوانین به طور مستقیم به <iframe>, <embed>, <video>و <object>عناصر اعمال می شوند. .embed-responsive-itemزمانی که می‌خواهید استایل را برای سایر ویژگی‌ها مطابقت دهید، به‌صورت اختیاری از یک کلاس نزول صریح استفاده کنید .

طرفدار نکته! شما نیازی به اضافه کردن آن frameborder="0"در <iframe>s خود ندارید زیرا ما آن را برای شما لغو می کنیم.

مثال

هر جاسازی را مانند یک <iframe>عنصر والد با .embed-responsiveو نسبت ابعاد بپیچید. به .embed-responsive-itemشدت مورد نیاز نیست، اما ما آن را تشویق می کنیم.

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
</div>

نسبت ابعاد

نسبت ابعاد را می توان با کلاس های اصلاح کننده سفارشی کرد. به طور پیش فرض کلاس های نسبت زیر ارائه می شود:

<!-- 21:9 aspect ratio -->
<div class="embed-responsive embed-responsive-21by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 1:1 aspect ratio -->
<div class="embed-responsive embed-responsive-1by1">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

در داخل _variables.scss، می‌توانید نسبت‌های تصویری را که می‌خواهید استفاده کنید تغییر دهید. در اینجا نمونه ای از $embed-responsive-aspect-ratiosلیست آمده است:

$embed-responsive-aspect-ratios: (
  (21 9),
  (16 9),
  (4 3),
  (1 1)
) !default;