Embeds

Jieun video responsif atawa pintonan slaid embeds dumasar kana rubak indungna ku nyieun hiji rasio intrinsik nu skala dina alat nu mana wae nu.

Ngeunaan

Aturan anu langsung dilarapkeun ka <iframe>, <embed>, <video>, sarta <object>elemen; optionally make kelas turunan eksplisit .embed-responsive-itemlamun rék cocog styling pikeun atribut sejenna.

Pro-Tip! Anjeun teu perlu kaasup frameborder="0"dina <iframe>s anjeun salaku urang override nu keur anjeun.

Contona

Bungkus naon waé embed sapertos an <iframe>dina unsur indung .embed-responsivesareng rasio aspék. Éta .embed-responsive-itemhenteu diwajibkeun sacara ketat, tapi kami ajak.

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

Babandingan aspék

Rasio aspék tiasa disaluyukeun sareng kelas modifier. Sacara standar, kelas rasio ieu disayogikeun:

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

Dina _variables.scss, Anjeun bisa ngarobah rasio aspék nu Anjeun hoyong pake. Ieu conto $embed-responsive-aspect-ratiosdaptar:

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