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 gönder