Embeds

Tsim cov lus teb video lossis slideshow embeds raws li qhov dav ntawm niam txiv los ntawm kev tsim ib qho piv txwv uas ntsuas ntawm txhua lub cuab yeej.

Txog

Cov cai siv ncaj qha rau <iframe>, <embed>, <video>, thiab <object>cov ntsiab lus; xaiv tau siv cov tub ntxhais kawm paub meej .embed-responsive-itemthaum koj xav kom phim cov styling rau lwm yam cwj pwm.

Pro-Tip! Koj tsis tas yuav suav nrog frameborder="0"hauv koj <iframe>li peb hla dhau qhov ntawd rau koj.

Piv txwv

Qhwv tej embed zoo li ib tug <iframe>nyob rau hauv ib tug niam txiv keeb nrog .embed-responsivethiab ib tug nam piv. Qhov .embed-responsive-itemtsis yog yuav tsum tau nruj me ntsis, tab sis peb txhawb nws.

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

Aspect ratios

Aspect ratios tuaj yeem kho nrog cov chav kawm hloov kho. Los ntawm lub neej ntawd cov chav kawm piv txwv hauv qab no tau muab:

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

Tsis pub dhau _variables.scss, koj tuaj yeem hloov pauv qhov piv txwv uas koj xav siv. Nov yog ib qho piv txwv ntawm $embed-responsive-aspect-ratiosdaim ntawv teev npe:

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