Source

Kupachika

Unda upachikaji wa video au onyesho la slaidi kulingana na upana wa mzazi kwa kuunda uwiano wa asili unaopimwa kwenye kifaa chochote.

Kuhusu

Kanuni zinatumika moja kwa moja kwa <iframe>, <embed>, <video>, na <object>vipengele; kwa hiari tumia darasa la uzao dhahiri .embed-responsive-itemunapotaka kulinganisha mtindo wa sifa zingine.

Pro-Tip! Huhitaji kujumuisha frameborder="0"katika <iframe>s yako tunapobatilisha hilo kwa ajili yako.

Mfano

Funga kipachiko chochote kama <iframe>kipengee cha mzazi .embed-responsivena uwiano wa kipengele. Hilo .embed-responsive-itemhalihitajiki kabisa, lakini tunahimiza.

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

Uwiano wa vipengele

Uwiano wa vipengele unaweza kubinafsishwa kwa madarasa ya kurekebisha. Kwa chaguo-msingi, viwango vifuatavyo vya uwiano vinatolewa:

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

Ndani _variables.scssya , unaweza kubadilisha uwiano wa vipengele unavyotaka kutumia. Hapa kuna mfano wa $embed-responsive-aspect-ratiosorodha:

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