Cuma 31 Mart 2023
Hakkında
Yazarlarımız
Reklam
Künye
İletişim
Webmaster.Kitchen – Türkiye'nin Webmaster MutfağıWebmaster.Kitchen – Türkiye'nin Webmaster Mutfağı

Bülten

Sosyal Medya Yasası Kabul Edildi

Binance ‘e Siber Saldırı

Webmaster.Kitchen – Türkiye'nin Webmaster MutfağıWebmaster.Kitchen – Türkiye'nin Webmaster Mutfağı
  • BAŞLARKEN
    • KOD
      • PHP
      • Asp.Net
      • Swift
      • MySQL
      • CMS
  • TASARIM
    • İpuçları
    • Çizim
    • Illustrator
    • Photoshop
    • Trendler
  • ARAYÜZ
    • JavaScript
    • HTML5
    • CSS
    • REACT
  • İPUÇLARI
    • API
    • Güvenlik
    • IDE
    • Framework
    • OS
    • Verimlilik
    • İçerik
      • Dökümantasyon
      • İpuçları
      • Nasıl Oluşturulur?
  • KAYNAKLAR
    • Tasarım
    • Kod
    • İş
  • GİRİŞİM
    • Finans
    • Girişimci
    • Nasıl yapılır?
  • ARAÇLAR
  1. Anasayfa
  2. JavaScript
  3. SuperEmbed.js ile Responsive Video Yerleştirmek
 SuperEmbed.js ile Responsive Video Yerleştirmek
JavaScript

SuperEmbed.js ile Responsive Video Yerleştirmek

Yazar : Bilal UÇAR 12 Nisan 2017 0 Comment

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.

Etiketler: responsive video kodları responsive video nasıl yapılır superembed.js nasıl kullanılır superembed.js nedir superembed.js örneği
Önceki Yazı
Sonraki Yazı

Bilal UÇAR (Website)

administrator

Front-end Developer @Webmaster.Kitchen. Front-end developer olarak çalışıyorum. Bu konuda öğrendiklerimi sizlerle paylaşmaya çalışıyorum. Siz de yaptığınız çalışmaları, edindiğiniz bilgileri paylaşabilirsiniz. Yorum alanı ile mutfağa katkıda bulunun.

Yorum Yap Yorumu İptal Et.

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Taze Yazılar
Güncel

Sosyal Medya Yasası Kabul Edildi

14 Ekim 2022
Blockchain

Binance ‘e Siber Saldırı

8 Ekim 2022
Blockchain

Binance ‘den Ücretsiz Eğitim

5 Ekim 2022
Güncel

Japonya için Yenilenen Corolla

4 Ekim 2022
© 2021 Webmaster Kitchen. Tüm Hakları Saklıdır.