FitVids.JS —— 让视频响应屏幕尺寸变化_西安app开发_西安软件开发公司

23 Aug, 2016

FitVids.JS —— 让视频响应屏幕尺寸变化

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

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

步骤概述
wp_enqueue_ｓｃｒｉｐｔ方式集成脚本并添加初始化代码
修改oembed产生的embed代码结构，适应脚本需求

实际效果，可以用Android手机访问我的另一个博客http://www.chongwuzhu.com，打开任意一篇带有视频的文章，就可看到视频被自动缩放的效果。

FitVids.JS —— 让视频响应屏幕尺寸变化
使用Android手机查看视频的效果

集成FitVids脚本到WordPress

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

function add_fitvids() {

wp_register_ｓｃｒｉｐｔ('jquery_fitvids', get_template_directory_uri(). '/js/jquery.fitvids.js', array('jquery'), '2.0.110526' );

wp_enqueue_ｓｃｒｉｐｔ('jquery_fitvids');

add_action('wp_head', 'add_fitthem');

function add_fitthem() { ?>

<ｓｃｒｉｐｔ type="text/javaｓｃｒｉｐｔ">

jQuery(document).ready( function() {

jQuery('.video').fitVids();

});

<?php

}

add_action('wp_enqueue_ｓｃｒｉｐｔs', 'add_fitvids');

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

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

1	`<div` `class="video"><embed>...embed>div>`

修改embed输出代码

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

function add_embed_filter( $html ) {

$return = '

'

. $html . '

';

return $return;

}

add_filter('oembed_dataparse', 'add_embed_filter');

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

function add_oembed_filter( $html ) {

$return = '

'

. $html . '

';

return $return;

}

add_filter('embed_youku', 'add_oembed_filter');

add_filter('embed_56com', 'add_oembed_filter');

add_filter('embed_tudou', 'add_oembed_filter');

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

上一篇：使用CSS3 Flexbox布局

下一篇：jquery mobiscroll3.0 滑动、滚动 -select-时间选择美化插件

文章阅读

23 Aug, 2016