Bootstrap ile duyarlı / responsive video ekleme

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