当前位置: 首页 > 工具软件 > Fitvids.js > 使用案例 >

基于jQuery的响应式网站视频插件FitVids.js

黄聪
2023-12-01

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兼容性的最快方式。

有没想过通过FitVids来忽略一个视频?你可以直接给对象或者容器添加一个fitvidsignore类,然后你的视频就会根据这个类的属性来进行显示。如果你想添加自定义块来忽略FitVids,那就你就可以使用这个类了。

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

在IE11中,Vimeo的自动播放API还没与FitVids兼容。您必须手动点击要自动播放的视频。

 

转载于:https://www.cnblogs.com/design-engineer/p/5383185.html

 类似资料: