alexa  Menu
Bootstrap ile duyarlı responsive video ekleme
Bootstrap ile duyarlı / responsive video ekleme

  03.08.2015 ,   3 yorum ,   3.141 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:

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:

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

1 yıldız2 yıldız3 yıldız4 yıldız5 yıldız (1 votes, average: 5,00 out of 5)
Loading...

3 yorum yapılmış
  1. 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
  2. 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

Yorum yapın..

Güvenlik kodu *