SuperEmbed.js ile Responsive Video Yerleştirmek
Modern webde Responsive tasarımların her geçen gün arttığını görüyoruz. Çok güzel bir responsive tema gömülü yani embed kod eklendiğinde çok kötü görüntüye neden olabiliyor. Bunu önlemek için sizlere SuperEmbed.js‘ten bahsedeceğiz.
YouTube’dan Vimeo’ya yapılan her video sitesinde belirli bir boyuta sabitlenmiş varsayılan bir embed kodu bulunur. Bu responsive tasarımda her zaman problem olmuştur. Bu da geliştiricilerin bu soruna bir çözüm bulmasını gerektiriyor.
Bununla birlikte, bir CSS konteyner sınıfı kullanmak yerine, duyarlı videolar oluşturmak için ücretsiz bir JavaScript kitaplığı olan SuperEmbed.js’yi kullanabilirsiniz.
Bu eklenti embed videoları ana konteyneri doldurmak için genişletilir veya daraltılır. Bunun dışında tarayıcı penceresinin boyutuna göre de video boyutu otomatik ayarlanır.
SuperEmbed.js’in en iyi yanı profesyonelce kod bilmenize gerek olmadan kullanabiliyor olmanız. Böylece dosyaları kolayca sitenize yerleştirebilir ve çalıştırmasına izin verebilirsiniz.
Bu JS tüm videolar için belirli bir en-boy oranını korur Dolayısıyla kullanıcının hangi çözünürlük ve büyüklükte sitenizi gezeceğini düşünmek zorunda kalmazsınız. SuperEmbed jQuery gibi dışarı bağımlılığı bulunmaz.
Şu anda SuperEmbed, YouTube, Vimeo, Kickstarter, DailyMotion, Facebook, Vid.me ve Archive.org gibi sitelerden (diğerleri arasında) 15’den fazla video yerleştirmeyi destekliyor. Bu liste halen büyüyor, bu nedenle zamanla daha fazla video streaming hizmetinin eklenmesini bekleyin.
Bu eklentinin çalışması için, yalnızca kütüphaneyi indirmeniz ve sitenizin başlığına şu şekilde eklemeniz yeterlidir:
Desteklenen video siteleri ve geçerli tarayıcı desteği ile ilgili detayları GitHub repo‘sundan indirebilirsiniz.
Çoğunlukla, SuperEmbed, FireFox 3.5+, Chrome 4+ ve Internet Explorer 9’un veya daha yükse sürümlerini yani modern tarayıcıları desteklemekte.
SuperEmbed.js Örnek Uygulaması
Şimdi bu anlattıklarımızı bir uygulamayla sizlere gösterelim. Ben SuperEmbed’in JS dosyasını CodePen’e ekledim. Yanına da İnternet Haftası için hazırladığımız örnek videoyu ekledim. Run Pen diyerek uygulamayı çalıştırabilirsiniz. Nasıl çalıştığını HTML ve JS kodlarını inceleyerek daha iyi anlayabilirsiniz. Bunun dışında Edit on codepen diyerek Codepen’de test edebilirsiniz.
Bu makalede videolarınızı responsive hale getiren SuperEmbed.JS kütüphanesinden bahsettik. Bu konu hakkındaki düşüncelerinizi yorum yaparak bizlerle paylaşabilirsiniz.
