FitVideo.js – İframe ile çekilen medyayı tarayıcıya duyarlı yapma

Youtube, Vimeo gibi sitelerden alınan videoları bilirsiniz, mobil için ve bilgisayar için farklı aynı boyutta çıkarlar iframe ile sayfanıza çektiğiniz zaman. Bazen bu durum büyük sorun olabiliyor kimileri için. FitVids.js websitenizdeki videoların tarayıcıya duyarlı olmasını sağlayan bir jQuery eklentisidir. Bu eklenti kullanarak yayınlanmış olan videolar bütün tarayıcılar ve cihazlara göre uygun boyut alabilme özelliğine sahiptir. Demo sayfasını açtığınız zaman taraıcınızı küçültürseniz demo sayfasındaki videolarında tarayıcıya göre eşit bir oranla küçüldüğünü göreceksiniz.

Download

Demo

Kullanım

Javascript :

<script src="path/to/jquery.min.js"></script>
<script src="path/to/jquery.fitvids.js"></script>
<script>
  $(document).ready(function(){
    // Target your .container, .wrapper, .post, etc.
    $("#css-secici").fitVids();
  });
</script>

Desteklenen Videolar (Her tablo alanına bir video embed kodunu girmeniz gerekiyor) :

<table>
<tr><td>YouTube</td><td>Y</td></tr>
<tr><td>Vimeo</td><td>Y</td></tr>
<tr><td>Blip.tv</td><td>Y</td></tr>
<tr><td>Viddler</td><td>Y</td></tr>
<tr><td>Kickstarter</td><td> Y</td></tr>
</table>

JavaScript :

  $("#css-secici").fitVids({ customSelector: "iframe[src^='https://mycoolvideosite.com'], iframe[src^='https://myviiids.com']"});
  // Selectors are comma separated, just like CSS / Css seçicileri virgülle ayırarak çoğaltabilirsiniz.