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

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

  1. java响应式网页设计_基于HTML5的响应式网站的设计与实现(论文).docx

    毕业论文 基于HTML5的响应式网站的设计与实现 摘 要 随着网络的发展和普及,各类建站技术的更新与运用,现在搭建一个网站的时间和成本越来越低,使得企业官方网站得到了极大的发展.从早期简单的网页展示, ...

  2. html5圆形头像滚动效果,基于jQuery实现响应式圆形图片轮播特效

    本文实例讲述了基于jQuery实现响应式圆形图片轮播特效代码.分享给大家供大家参考.具体如下: 运行效果截图如下: mislider是一款效果非常酷的jQuery响应式圆形图片轮播图特效插件,misl ...

  3. 基于Vue的响应式轮播插件|vue-owl-carousel

    vue-owl-carousel 是一个基于Vue的响应式轮播插件,灵感来源于 jQuery 插件 owlCarousel. 它提供了类似于 owlCarousel 的 API 和功能,同时结合了 V ...

  4. html5管理开题报告,基于HTML5的响应式网站的设计与实现(论文)开题报告

    [9] Brad Dayley,jQuery与JavaScript入门经典 [M].北京:人民邮电出版社,2014. [10] 王映龙,刘春阳,熊曾刚,Java EE实用教程 [M].北京:清华大学出 ...

  5. 检测屏幕.html,15款html5响应式网站跨屏幕测试工具

    手机.平板灯手持设备的增多,网站要顺应变化,就必须要做响应式开发,响应式网站最大的特点在于可以在不同设备下呈现不同的布局,是基于html5+css3技术,目前越来越多的网站开始采用了响应式设计,而下面 ...

  6. 响应式网站导航html,jQuery和CSS3响应式网站导航幻灯片插件

    这是一款即实用又炫酷的jQuery和CSS3响应式网站导航幻灯片插件.该插件将幻灯片制作为网站的hero导航,在幻灯片中展示网站各主要板块的内容,使用户可以非常容易的了解网站的主要信息. 该幻灯片插件 ...

  7. 基于jquery响应式网站图片无限加载瀑布流布局

    分享一款效果非常酷的jQuery瀑布流布局无限加载图片效果.整个页面采用响应式布局,图片采用jQuery.Lazyload延时加载技术,提升整个页面的加载速度.效果图如下: 在线预览   源码下载 实 ...

  8. 响应式网站切图实操-姜威-专题视频课程

    响应式网站切图实操-7236人已学习 课程介绍         本课程讲以互动的方式与学员共同打造一个网站,从创意开始,一直到整体页面被呈现出来.从原生的方式到主流的UI开发过程.一切从零开始,只要你 ...

  9. 什么叫基于web的网站_什么叫响应式网站?响应式网站模板教程

    随着移动端网站访问需求增加,"响应式网站"越来越受到用户欢迎.到底什么叫响应式网站呢? 其实就是网站效果可以随着屏幕尺寸大小而自适应,不会发生变形.扭曲.缺失的现象.不管你是在使用 ...

  10. 【Unity3D插件】UniRx(基于Unity的响应式编程框架)插件学习

    一.介绍UniRx插件 UniRx是一种基于Unity3D的响应式编程框架. UniRx就是Unity版本的Rx响应式扩展,响应式就是观察者和定时器,扩展指的是LINQ的操作符.Rx响应式扩展的特点就 ...

最新文章

  1. ValueError: invalid literal for int() with base 10: “ ”
  2. 让世界零距离 小鱼易连的大梦想
  3. dell 服务器硬件信息监控OMSA安装
  4. Centos 中 service iptables stop 失败
  5. python画图y轴在右侧_解决python中画图时x,y轴名称出现中文乱码的问题
  6. 一文入门 Kafka
  7. Android ListView性能优化实例讲解
  8. URL,URLConnection,HttPURLConnection的使用
  9. [JSOI2009]瓶子和燃料
  10. 合理使用“搜索引擎和工具书”,提升“速度和加速度”
  11. 黑马程序员-java学习第一天
  12. [WinError 193] %1 不是有效的 Win32 应用程序问题解决
  13. 一阶线性齐次,非齐次方程的通解和解的结构定理,推导过程。
  14. 如何判断一个APP页面是原生的还是H5页面
  15. sequence和sequencer — UVM
  16. 在微信小程序中怎么让一个页面的信息传递到另一个页面
  17. 【OSPF-一类router、二类network】(根据lsdb画出拓扑)
  18. Java SE 第四十八,九,五十讲 Map深入详解及遍历Map的两种实现手段 Map.Entry详解与作业要求,作业讲解...
  19. python——小例子 及 end=““ 和“t“的用法
  20. iOS开发之TextView常用属性

热门文章

  1. ibatis java 项目_iBatis搭建JAVA项目
  2. 安装Genymotion步骤,启动模拟器时显示CPU不支持虚拟化—解决方法:惠普主机开启VT虚拟化CPU
  3. mysql 避免临时表_MySQL 5.7临时表空间如何玩才能不掉坑里详解
  4. 服务器迁入虚拟主机的好处,服务器迁入虚拟主机的好处
  5. 【编译打包】nginx-1.4.7-1.el6.lite.src.rpm
  6. Oracle宣布JDK 6死缓:计划赶不上变化
  7. ftp 上传下载整个目录
  8. 从零到实现Shiro中Authorization和Authentication的缓存
  9. struts2+spring的两种整合方式
  10. 01背包 Codeforces Round #267 (Div. 2) C. George and Job