WordPress文章视频实现响应式

在制作快速响应式网站时,文字、图片等元素都可以很容易的响应屏幕尺寸的变化,唯独视频比较麻烦。比如通过embed方式加载优酷、土豆甚至 YouTube视频时,使用max-width:100%的方式不能保证视频在任何设备上都能跟随屏幕尺寸缩放,这时可以借助js脚本来实现,这就是今天 要介绍的FitVids.JS。

访问 http://fitvidsjs.com/ 下载最新的FitVids脚本jquery.fitvids.js,也可直接下载将该脚本集成到WordPress中。

第一步、集成FitVids脚本到WordPress

将该脚本放在主题目录的js文件夹下,并在functions.php中加入如下脚本

这段代码将FitVids脚本添加到WordPress站点的<head>标签中,并运行一段初始化代码。

注意到代码中jQuery查找的元素是.video这个class,所以需要给embed代码外面加上一个wrapper,比如加上

第二步、修改embed输出代码

针对YouTube或Vimeo等支持oembed的视频源,将下面的代码添加到functions.php中

若是针对youku、土豆和56.com,注意如果你安装了中文版的WordPress,就支持自动embed这些网站的视频,只需要添加下面的代码,就可以修改结构

完成这些,通过oembed方式加载的站外视频就可以自动响应屏幕尺寸的变化了,不用担心完美的主题被一个横跨出去的视频破了相。

PS:悲剧的是不支持iOS系统。

 

 

  • 打赏
  • 评论 0
  • 分享
  • 点赞 0
转载请注明出处: WordPress文章视频实现响应式 | 乐朦

欢迎评论