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