Bootstrap

Bootstrap Responsive Embeds(Video Ekleme)

Bir video veya slayt gösterisi herhangi bir sürücüye orantılı bir şekilde uygulanabilir.

Bu özellik <iframe>, <embed>,<video>,<object> elementlerine direk uygulanabilir.

Örneğin <iframe> etiketi ile eklenen bir videoyu responsive hale getirmek için .embed-responsive-item classının kullanılması gerekir. Konteyner <div> videonun en oranını tanımlar.

Şekil *.1: .embed-responsive-item classının kullanımı

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

 

Görüntünün en-boy oranı yüksekliği ve genişliği arasındaki oransal ilişkiyi tanımlar. 4:3 ve 16:9 olmak üzere temel iki oran vardır.

Şekil *.2: 16:9 ve 4:3 oranlarının tanımı

 

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

 

Yorum Yap