Bootstrapta ki responsive embed (gömme) compenenti ile videolarımızı duyarlı olarak web sayfamızda gösterebiliriz.
Önce sayfamıza bootstrapın css ve js kodlarını enegre etmemiz gerekiyor. Bu konudaki yazımda ekli videoya buradan ulaşabilirsiniz.
Kodlarımızı videonun en, boy oranına ve sayfamızın durumuna göre iki şekilde ki formatla oluşturabiliriz.
HD televizyon ve Avrupa dijital televizyonu için 16:9 foormatı ve kare boyutunda ki 4:3 formatı.
16:9 görünüş oranına göre kodlarımız:<div class="embed-responsive embed-responsive-16by9"><iframe class="embed-responsive-item" src="..."></iframe></div>
4:3 görünüş oranına göre kodlarımız:
<div class="embed-responsive embed-responsive-4by3"><iframe class="embed-responsive-item" src="..."></iframe></div>
Her iki kod şeklinde de; Youtube.com dan seçtiğimiz videonun altındaki Paylaş sekmesine tıklıyoruz. Sonra altındaki Ekle butonuna tıklıyoruz. Alttaki iframe içindeki "https://........." ile başlayan embed kodlarını kopyalayıp bootstrap ta ki src= den sonra başlayan tırnak içindeki üç noktalı yere yapıştırıyoruz.
Kodu çalıştırdığımızda tarayıcımızın genişliği kadar videonun büyüdüğü görürüz. Tarayıcımızı küçültüp büyüttüğümzde videonun responive (duyarlı) bir şekilde çalıştığını görürürz.
Videonun tarayıcı genişliğinde değilde, container genişliğinde açılması için yukarıdaki kodların en üstüne aşağıda ki kodu eklememiz gerekir.
<div class="container">
KODLARI İNDİR:
Uygulamayı aşağıda ki videodan veya youtube kanalımdan görsel olarak izleyebilirsiniz.
0 Comments
Yorum Gönder