Gömmeler

Herhangi bir cihazda ölçeklenen içsel bir oran oluşturarak ebeveynin genişliğine göre duyarlı video veya slayt gösterisi yerleştirmeleri oluşturun.

Hakkında

Kurallar doğrudan <iframe>, <embed>, <video>ve <object>öğelerine uygulanır; .embed-responsive-itemdiğer niteliklerin stilini eşleştirmek istediğinizde isteğe bağlı olarak açık bir alt sınıf kullanın .

Profesyonel İpucu! frameborder="0"Bunu sizin <iframe>için geçersiz kıldığımız için s'nize eklemeniz gerekmez .

Örnek

<iframe>Herhangi bir yerleştirmeyi bir üst öğedeki gibi .embed-responsiveve bir en boy oranıyla sarın . Bu .embed-responsive-itemkesinlikle gerekli değildir, ancak bunu teşvik ediyoruz.

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

En-boy oranları

En boy oranları, değiştirici sınıflarla özelleştirilebilir. Varsayılan olarak aşağıdaki oran sınıfları sağlanır:

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

içinde _variables.scss, kullanmak istediğiniz en boy oranlarını değiştirebilirsiniz. İşte $embed-responsive-aspect-ratioslistenin bir örneği:

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