SuperEmbed.js ile Duyarlı Videoları Kolayca Gömün

Modern web tamamen duyarlı ve daha fazla tasarımcı bunu her gün gerçekleştiriyor. Ancak, duyarlı tasarıma gelince sinir bozucu bir zorluk var: gömülü içerik.

YouTube'dan Vimeo'ya kadar her video sitesinde bir varsayılan gömme kodu belirli bir boyuta sabitlenmiş. Bu, geliştiricilerin başka çözümler kullanması gerektiği anlamına gelir. tamamen duyarlı videolar oluşturun.

Ancak, bir CSS kapsayıcı sınıfı kullanmak yerine, SuperEmbed.js, için ücretsiz bir JavaScript kütüphanesi duyarlı videolar oluşturma.

Bu eklenti iki problemi çözer bir kerede. Tüm gömülü videolar ana kabı doldurmak için gerin, aynı zamanda yeterince esnek olmakla tarayıcı penceresine göre yeniden boyutlandır.

En iyi bölüm bu SuperEmbed.js olduğunu ekstra kod gerektirmez, yani sadece yapabilirsin dosyaları göm ve koşmalarına izin ver. Bu JS kütüphanesi, gerisini halleder belirli sitelerdeki gömülü öğeleri hedefleme.

Tüm videolar Özel en boy oranlarını koru, Bu yüzden riskli boyutlar için endişelenmenize gerek yok. Ve SuperEmbed bir vanilla JS kütüphanesi ile bağımlılık yok jQuery gibi.

Şimdilik, SuperEmbed 15+ video göbeğini destekler YouTube, Vimeo, Kickstarter, DailyMotion, Facebook, Vid.me ve Archive.org gibi sitelerden (diğerleri arasında). Bu liste hala büyüyor, bu yüzden zamanla daha fazla video akış servisi eklenmesini bekleyin.

Bu aracı çalıştırmak için, sadece yapmanız gereken kütüphaneyi indir ve sitenizin başlığına ekleyin bunun gibi:

İndirebilirsiniz tamamen kopyala GitHub repo’nun desteklenen video siteleri ve mevcut tarayıcı desteği.

Çoğunlukla, SuperEmbed tüm modern tarayıcıları destekler FireFox 3.5+, Chrome 4+ ve Internet Explorer 9 veya daha yeni sürümlerinden.

Bu, tüm tarayıcı desteği ve ne kadar iyi olduğu göz önüne alındığında çok etkileyici bir kütüphanedir. kutudan çıkar çıkmaz. JavaScript'e güveniyorsanız, CSS bilgisayar korsanlarından çok daha basit bir çözümdür.

Bulabilirsin daha fazla bilgi GitHub’da ve bunu görebilirsiniz canlı yayın bu kemanda.