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

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

步骤概述

  • wp_enqueue_script方式集成脚本并添加初始化代码
  • 修改oembed产生的embed代码结构,适应脚本需求

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

使用Android手机查看的效果
使用Android手机查看视频的效果

集成FitVids脚本到WordPress

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

function add_fitvids() {
	wp_register_script('jquery_fitvids', get_template_directory_uri(). '/js/jquery.fitvids.js', array('jquery'), '2.0.110526' );
	wp_enqueue_script('jquery_fitvids');
	add_action('wp_head', 'add_fitthem');
	
	function add_fitthem() { ?>
		<script type="text/javascript">
			jQuery(document).ready( function() {
				jQuery('.video').fitVids();
			});
		</script><?php
	
	}
}
add_action('wp_enqueue_scripts', 'add_fitvids');

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

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

<div class="video"><embed>...</embed></div>

修改embed输出代码

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

function add_embed_filter( $html ) {
	$return = '<div class="video">' . $html . '</div>';
	return $return;
}
add_filter('oembed_dataparse', 'add_embed_filter');

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

function add_oembed_filter( $html ) {
	$return = '<div class="video">' . $html . '</div>';
	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主题被一个横跨出去的视频破了相。

9条留言

  1. 集成FitVids脚本是啥 为啥我下了那个东西是个软件的样子
    啊 响应式布局就懂点 bootstrap 大一渣渣一个求教。。。

    1. 什么软件的样子?你到github上下载,应该是jquery.fitvids.js这个文件

  2. 请教一下,如果我使用bootstrap web框架加织梦后台,想使用这个jquery.fitvids.js插件应该怎做呢?

    1. 按照https://github.com/davatron5000/FitVids.js的说明使用

  3. SOLA,我想问问在启用FitVids.JS后,怎么才知道它是否生效了呢?在电脑上看得出变化吗,还是一定要用手机来访问才能看到。

    1. 这猪网站其实比我的技术博更老^_^

      1. 应该是吧,因为我有看到你的头像用到那个PIG的头像(是指你BLOG的头像),那个头像很可爱

评论功能已关闭