alexa  Menu
Bootstrap ile duyarlı responsive video ekleme

Bootstrap ile duyarlı / responsive video ekleme

  03.08.2015 ,   5 yorum ,   13.927 kez okundu.

Paylaşımlarımda sürekli duyarlı / responsive sayfa örnekleri gösteriyorum. Çünkü artık günümüz bunu gerektiriyor. Hazırladığımız projeler hem bilgisayar ortamında, hem de mobil cihazlarda çalışabilir olmalı ki, daha çok kullanıcıya hitap edebilelim. Daha önceki paylaştığım eğitimlerde sayfaların, resimlerin duyarlı olması için neler yapmamız gerektiğinden bahsetmiştim. Özellikle bootstrap dersleri kategorisinde paylaştığım eğitimler hep duyarlı sayfalar üzerineydi.

Şimdi bir de sayfalarımızda artık belki de resimlerden daha çok kullandığımız videoları nasıl duyarlı hale getirebiliriz, özellikle bootstrap kullanarak bu işlemi nasıl başarabiliriz bu konuya değineceğim. Bootstrap ilk yayınlandığı zamanlarda bu özellik aslında yoktu. Sonradan bootstrap ekibi bu özelliği de Responsive Embed adı altında ekledi. Dolayısıyla eğer sayfanızda eski sürüm bootstrap css ve js dosyaları kullanıyorsanız onları güncellemeniz gerekecektir.

Bootstrap ile responsive video nasıl eklenir?

Evet şimdi gelelim bu işlemi nasıl yapacağımıza. Öncelikle tabiki sayfamıza bootstrap entegrasyonu yapmamız gerekiyor. Bu işlemi yeniden anlatmayacağım. Bootstrap kurulumu için daha önce paylaştığım video eğitime buradan ışınlanabilirsiniz. 🙂

Kurulumu yaptığınızı varsayarak bir sonraki adıma geçiyorum. Bootstrapın bu işlem için kullanmamızı istediği kodlar aşağıdaki gibidir:

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

Gördüğünüz gibi videoları 2 farklı boyutlandırma seçeneğine göre yayınlayabilirsiniz. İlki 16:9 çözünürlüğüdür ki, yukarıdaki kodlarda ilk 4 satırı kullanarak bu çözünürlüğü seçebilirsiniz. İkincisi 4:3 oranında bir çözünürlüktür bu da yukarıdaki kodlarda son 4 satırı kullanarak seçebileceğiniz bir seçenektir.

Peki video kodlarını nereye yapıştıracaksınız? Evet önemli kısım bu. Örneğin youtube üzerinden herhangi bir videoyu sayfanıza eklemek istiyorsanız, videonun altında paylaş (share) bölümünden embed başlığı altındaki kodları kopylayarak, yukarıdaki kodlarda iframe ile başlayan satırın yerien yapıştırmanız gerekiyor. Arından kopyaladığınız embed kodları içerisinde iframe etiketine embed-responsive-item sınıfını tanımlamanız gerekiyor. Kısacası kodunuz aşağıdaki gibi olacaktır:

<!-- 16:9 aspect ratio -->
    <div class="embed-responsive embed-responsive-16by9">
      <iframe class="embed-responsive-item" width="560" height="315" src="https://www.youtube.com/embed/cf3WicB0-E8" frameborder="0" allowfullscreen></iframe>
    </div>
    
    <hr>
    
    <!-- 4:3 aspect ratio -->
    <div class="embed-responsive embed-responsive-4by3">
      <iframe class="embed-responsive-item" width="560" height="315" src="https://www.youtube.com/embed/cf3WicB0-E8" frameborder="0" allowfullscreen></iframe>
    </div>

Böylece istediğiniz çözünürleğe göre, videolarınızı responsive / duyarlı olarak yayınlayabilirsiniz.

Örnek dosyayı indir

Dersin görsel versiyonunu izlemek için Bootstrap ile duyarlı / responsive video ekleme video anlatım başlığına ışınlanamabilirsiniz 🙂

Kaynak: responsive embed

5 yorum yapılmış

    Teknoloji Haberleri

    Bootstrap ‘a duyarlı video eklemeyi çok güzel bir şekilde anlatmışsınız. Kendi adıma çok yararlı bir makale olduğunu söyleyebilirim . Teşekkürler.

    04.08.2015, 12:09:26

    Umut Çağdaş Coşkun

    Videoları farklı boyutlara göre uyumlu hale getirebilir miyiz? Yani her video boyutlandırması için tek tek mi yapmalıyız yoksa ortak bir ayar var mı?

    18.08.2015, 6:34:24

    SERTAÇ

    Faydalandık teşekkür ederiz

    13.02.2019, 10:23:26

Yorum yapın..

isim yerine gerçek isim ve soyisim yazılmadan yapılan yorumlar kesinlikle onaylanmıyor bilginiz olsun.


The reCAPTCHA verification period has expired. Please reload the page.


%d blogcu bunu beğendi: