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-item
unapotaka 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-responsive
na uwiano wa kipengele. Hilo .embed-responsive-item
halihitajiki kabisa, lakini tunalihimiza.
<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.scss
ya , unaweza kubadilisha uwiano wa vipengele unavyotaka kutumia. Hapa kuna mfano wa $embed-responsive-aspect-ratios
orodha:
$embed-responsive-aspect-ratios: (
(21 9),
(16 9),
(4 3),
(1 1)
) !default;