基于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兼容。您必须手动点击要自动播放的视频。