embed های واکنش گرا در بوت استرپ

کلاس embed به ویدئو ها و اسلایدشو ها اجازه ی مقیاس بندی درست، در هر وسیله ای را می دهد.

این کلاس ها می توانند به طور مستقیم بر روی عناصر <iframe> و <embed> و <video> و <object> اعمال شوند.

مثال زیر، یک ویدئوی واکنش گرا را با اضافه کردن یک کلاس embed-responsive-item. به یک تگ <iframe> ایجاد می کند(سپس ویدئو ی مورد نظر به خوبی نسبت به عنصر والد خود مقیاس بندی می شود).

محتوای عنصر <div> زیر نسبت ابعاد ویدئو را تعریف می کند:

مثال (عکس های بوت استرپ)

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

خودتان امتحان کنید »
Note

نسبت ابعاد چیست؟

نسبت ابعاد یک عکس، ارتباط مناسب بین عرض و ارتفاع را توصیف می کند.
دو نسبت ابعاد متداول عبارتند از 4:3(فرمت جهانی ویدئو در قرن بیستم) و 16:9(فرمت جهانی برای تلوزیون های HD و تلوزیون های دیجیتال اروپایی).

شما می توانید هر یک از دو نسبت ابعاد را به دلخواه انتخاب کنید:

<!-- 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>