基於jQuery的響應式網站視頻插件FitVids.js

FitVids.js是什麼

FitVids.js是一個輕量級的jQuery響應式視頻插件，他能夠實現流體視頻的嵌入。FitVids.js應用了內在的比例算法，在你的響應網頁上實現視頻的流體寬度。

使用方法：

引入 jQuery 1.7+ and FitVids.js ，使用fitVids()方法把視頻放到目標容器中。

<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.
    $("#thing-with-videos").fitVids();
  });
</script>

這段代碼會讓視頻（video）被包含於一個已經設置了必要樣式的fluid-width-video-wrapper類的div裏。JavaScript調用後，全部的元素都會基於百分比進行顯示。

目前支持的播放器

YouTube Y
Vimeo Y
Blip.tv Y*
Viddler Y*
Kickstarter Y*
*表示原生支持可能已經被棄用。若是還沒支持你的視頻平臺，能夠嘗試添加customSelector...

添加本身的視頻提供商

有沒有一個自定義的視頻提供商呢？答案是確定的，FitVids.js有一個能夠你添加本身的視頻提供商的customSelector選項

$("#thing-with-videos").fitVids({ customSelector: "iframe[src^='http://mycoolvideosite.com'], iframe[src^='http://myviiids.com']"});
// Selectors are comma separated, just like CSS

注意：這是添加本身的自定義的提供商，以及測試他們與FitVids兼容性的最快方式。

忽略clsss類

有沒想過經過FitVids來忽略一個視頻？你能夠直接給對象或者容器添加一個fitvidsignore類，而後你的視頻就會根據這個類的屬性來進行顯示。若是你想添加自定義塊來忽略FitVids,那就你就可使用這個類了。

$("#thing-with-videos").fitVids({ ignore: '.mycooldiv, #myviiid'});
// Selectors are comma separated, just like CSS

在IE11中，Vimeo的自動播放API還沒與FitVids兼容。您必須手動點擊要自動播放的視頻。